<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: black;
text-align: center;
}
.center {
position: relative;
left: 60px;
}
</style>
<script>
function myFunction(){
var a= document.getElementById("txt1").value;//user validation
var b=document.getElementById("txt5").value; // password validation
var c= document.myForm.email.value;//email validation
var atposition=c.indexOf("@");
var dotposition=c.lastIndexOf(".");
var d = document.getElementById("txt3").value;//phone number validation
if(a=="")
{
document.getElementById("message").innerHTML="*Name must be filled";
return false;
}
if(a.length< 3){
document.getElementById("message").innerHTML="*Char must be greater than 3";
return false;
}
if(a.length> 20){
document.getElementById("message").innerHTML="*Char must be less than 20";
return false;
}// end user validation
if (b==""){ //pasword
document.getElementById("message3").innerHTML="*password cannot be empty";
return false;
}
if (b.length>15){
document.getElementById("message3").innerHTML="*password must be 15 char";
return false;
}//end password
if (atposition<1 || dotposition<atposition+2 || dotposition+2>=c.length){
alert("Please enter a valid e-mail address \n atpostion:"+atposition+"\n dotposition:"+dotposition);
return false; //email validation
}
if (d == ""){
document.getElementById("message2").innerHTML="*Mobile num cannot be empty";
return false;
}
if(d.length < 10){
document.getElementById("message2").innerHTML= "*number must be 10";
return false;
}
if(d.length > 10){
document.getElementById("message2").innerHTML= "*number cannot be greater than 10";
return false;
}
}
</script>
<body>
<h1>JAVASCRIPT FORM</h1>
<div class="center">
<form name="myForm" onsubmit="return myFunction()">
Name:
<input type="text" id="txt1" value="" placeholder="Enter Your Name">
<span id="message" style="color:red"></span>
<br><br></div>
<div style="position: relative; left: 45px">
Email id:
<input type="email" name="email" id="txt2" value="" placeholder="Enter Email"><span id="message1" style="color:red"></span>
<br><br></div>
<div style="position: relative; left: 19px">
Mobile Num:
<input type="Number" id="txt3" name="phone" value="" placeholder="Enter Mobile Num">
<span id="message2" style="color:red"></span>
<br><br></div>
<div style="position: relative; left: 40px">
Password:
<input type="password" id="txt5" value="" placeholder="Enter Password"><span id="message3" style="color:red"></span>
<br></div><br>
<input type="submit" value="Submit" style="position: relative; left: 150px; background-color: MediumSeagreen;">
</form>
</head>
</body>
</html>
RUN CODE
No comments:
Post a Comment