Form Validation in JavaScript
Form Validation
<html>
<head><title>validation form</title>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
}
input[type=number]{
width:300px;
border:none;
outline:none;
border-bottom:2px solid orange;
}
input[type=Password]{
width:300px;
border:none;
outline:none;
border-bottom:2px solid orange;
}
input[type=text]{
width:300px;
border:none;
outline:none;
border-bottom:2px solid orange;
}
input[type=submit]{
height:30px;
width:80px;
font-size:20px;
border-radius:10px;
}
label{
width:50px;
text-align:right;
}
.d{
width:100px;
text-align:right;
font-size:20px;
}
.d2{
height:50px;
text-align:center;
}
div{
border-radius:16px;
background-color:#afa;
}
</style>
</head>
<body><div>
<form>
<table>
<tr><td class="d"><label for="nm">UserId :</label></td>
<td class="d1"><input type="text" name="uid"required></tr><br><br>
<tr><td class="d"><label for="nm">Password :</label>
<td class="d1"><input type="Password" onkeyup="aa()" id="ck"pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"required>
<span id "chk"></span><input type="checkbox" onclick="showPW()">show</span></tr><br><br>
<tr><td class="d"><label for="nm">Contact no:</label>
<td class="d1"><input type="number" name="uid" id="n1"required></tr>
<tr><td class="d"></td><td class="d2"><input type="submit" value="submit" onclick="fun()"></tr>
<tr><td class="d"><span id="show"></span></td>
</form>
</div>
<script>
function aa()
{
var c=document.getElementById("ck");
if(!c.checkValidity()){
document.getElementById("chk").innerHTML= "successfully submited";
}
else
{
document.getElementById("chk").innerHTML="Try again";
}
}
function fun()
{
const n=document.getElementById("n1");
if(n.length!==10){
document.getElementById("show").innerHTML= 'ok' ;
}
else
{
document.getElementById("show").innerHTML="Try again";
}
}
function showPW() {
var x = document.getElementById("ck");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script></body></html>
Comments
Post a Comment