validation script comolet program
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#mob,#submit, input{
outline:none;
border-radius:5px;
border:1px solid grey;
padding:2px;
font-size:1em;
margin:10px;
}
}
</style>
</head>
<body>
<form method="post" action="send_otp.php">
<span style="color:red" id="msg_m" >Do not leave blank!</span><br>
<input id="mob" type="text" name="mobile" maxlength="10"
placeholder="Enter Mobile Number" required onkeyup="validate()" autocomplete="off" >
<span id="msg_a" ></span><br>
<input id="aadhaar" type="text" name="aadhaar" maxlength="12"
placeholder="Enter Aadhaar Number" required onkeyup="validate()" autocomplete="off" >
<input id="submit" type="submit" name="send_otp" disabled="disabled" >
</form>
<script type="text/javascript">
function validate(){
var mob = document.getElementById("mob");
var mob_v = mob.value ;
var submit = document.getElementById("submit");
var msgM = document.getElementById("msg_m");
//var msg.style.color = msg.style.color;
setTimeout(function(){
if(mob_v == ""){
//mobile
msgM.innerHTML = "Do not leave blank!";
msgM.style.color = "red";
mob.style.border = "1px solid red";
mob.style.color = "red";
submit.disabled = true;
}
else if(isNaN(mob_v)){
msgM.innerHTML = "Please enter only number.";
msgM.style.color = "red";
mob.style.border = "1px solid red";
mob.style.color = "red";
submit.disabled = true;
}
else if(mob_v.charAt(0)!=9 && mob_v.charAt(0)!=8 && mob_v.charAt(0)!=7 && mob_v.charAt(0) !=6){
msgM.innerHTML = "Mobile must be start with 9, 8, 7, or 6 digits.";
msgM.style.color = "red";
mob.style.border = "1px solid red";
mob.style.color = "red";
submit.disabled = true;
}
else if(mob_v.length < 10){
msgM.innerHTML = "Mobile no. must be 10 digits.";
msgM.style.color = "red";
mob.style.border = "1px solid red";
mob.style.color = "red";
submit.disabled = true;
return false;
}
else {
msgM.innerHTML = "Okay!";
msgM.style.color = "green";
mob.style.border = "1px solid green";
mob.style.color = "green";
submit.disabled = false ;
}
}, 1);
}
</script>
</body>
</html>
No comments:
Post a Comment