Registration Form with Validations.
<html>
<head>
<title>Registration Form</title>
</head>
<script language="JavaScript">
function disp()
{
var abc="[a-z,A-Z]";
var no="[0-9]";
var f_name=document.f1.txt_Fname.value;
var m_name=document.f1.txt_Mname.value;
var l_name=document.f1.txt_Lname.value;
var mo=document.f1.txt_pno.value;
var mail=document.f1.txt_email.value;
var str=mo.substring(0,1);
if(f_name=="" || m_name=="" || l_name==""|| mo=="" || mail=="")
{
alert("Fields with * are mandatory");
}
else if(f_name.match(no) || m_name.match(no) || l_name.match(no))
{
alert("invalid input");
}
else if(mo.match(abc))
{
alert("number entered is invalid");
}
else if(mo.match(length!=10))
{
alert("10 digit number is required");
}
else if(str<7 || str>9)
{
alert("Mobile number must begin with 7 or 8 or 9 ");
}
else if(mail.indexOf("@")==-1 || mail.indexOf(".com")==-1)
{
alert("email Id is invalid");
}
else
{
document.write("<html><head><title></title></head><body><center><h1>Registration successful</h1></center></body></html>");
document.write("<center><b>Entered Details</b><table border='5' align='center'><tr><th>First Name:</th><th>"+f_name+"</th></tr></center>");
document.write("<tr><th>Middle Name:</th><th>"+m_name+"</th></tr>");
document.write("<tr><th>Last Name:</th><th>"+l_name+"</th></tr>");
document.write("<tr><th>Phone No:</th><th>"+mo+"</th></tr>");
document.write("<tr><th>Email:</th><th>"+mail+"</th></tr>");
}
}
</script>
<form name="f1">
<body>
<center>
<h1 style="color:red">Registration Form</h1>
<table align ='center' border='collapse' borderColorDark="blue">
<tr><th>First Name</th><th><input type="text" name="txt_Fname" placeholder="First name"><b>*</b><br>
</tr>
<tr><th>Middle Name</th><th><input type="text" name="txt_Mname" placeholder="Middle name"><b>*</b></tr>
<tr><th>Last Name</th><th><input type="text" name="txt_Lname" placeholder="Last name"><b>*</b></tr>
<tr><th>Address</th><th height=5><textArea name="txt_Addr" value="" cols=15 rows=4 ></textArea></tr>
<tr><th>Phone Number</th><th><input type="text" name="txt_pno" value=""><b>*</b></tr>
<tr><th>Email Id</th><th><input type="text" name="txt_email" value=""><b>*</b></tr>
<tr><th>Date of Birth</th><th><input type="date" name="txt_dob" value=""></tr>
<tr><th>Gender</th><th> <input type="radio" name="group1" value="Male" checked> Male<br>
<input type="radio" name="group1" value="Female">Female</th></tr>
<tr><th>Hobbies</th><th> <input type="checkBox" name="cbox1" value="">Football<br><input type="checkBox" name="cbox2" value="">Cricket<br>
<tr><th>Country</th><th><Select name = "country">
<option name="India">India</option>
<option name="Iran">Iran</option>
<option name="Germany">Germany</option>
<option name="USA">USA</option></Select></tr>
<tr><th>States</th><th><Select name = "State">
<option name="Maharashtra">Maharashtra</option>
<option name="AndraPradesh">AndraPradesh</option>
<option name="Gujrat">Gujrat</option>
<option name="Rajasthan">Rajasthan</option></Select></tr>
<tr><th>City</th><th><Select name = "City">
<option name="Mumbai">Mumbai</option>
<option name="Pune">Pune</option>
<option name="Delhi">Delhi</option>
<option name="Ambernath">Ambernath</option></Select></tr>
<tr><th colspan='4'><input type="Button" name="btn_submit" value="Submit" onClick="disp()">
<input type="RESET" name="btn_reset" value="Reset"></tr>
</table>
</center>
</form>
</body>
</html>
Output:-
1.
2.
3.
4.
5. Final output:-
