It is important to validate the form submitted by the user because it can have inappropriate values. So, validation is must to authenticate user.
Form validation checks the accuracy of the user’s information before submitting the form. JavaScript provides faster client-side form validation than server-side validation does. Server-side validation requires more time first occurring on the server, which requires the user's input to be submitted and sent to the server before validation occurs. Thus, client-side validation helps to create a better user experience. A lot of developers prefer JavaScript form validation.
Example
We are going to validate the name and password. The name can’t be empty and password can’t be less than 8 characters long.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Tutorial</title>
<script type="text/javascript">
function validateform(){
//var username=document.myform.username.value;
//var password=document.myform.password.value;
var username= document.forms["myform"]["username"].value;
var password=document.forms["myform"]["password"].value;
if(username== "" || password== ""){
alert("Username and Password are required");
return false;
}
else if(password.length<8)
{
alert("Password must be at least 8 characters long");
return false;
}
}
</script>
</head>
<body>
<form name="myform" action="#" onsubmit="return validateform()">
<label for="username">Username:</label>
<input type="text" name="username" id="username"> <br><br>
<label for="password">Password:</label>
<input type="password" name="password" id="password">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output
Password Validation
- A password should be made up of alphanumeric characters.
- The password's first letter should be in the capital.
- A special character (@, $,! &, etc.) must be included in the password.
- The length of the password must be higher than 8 characters.
There are two different approaches mentioned here for a valid password:
Validation form with username
Validation form with Confirm password
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Tutorial</title>
<script type="text/javascript">
function validateform(){
var username= document.getElementById("username").value;
var password=document.getElementById("password").value;
if(username== "" || password== ""){
document.getElementById("message").innerHTML="Username and Password can't be blank";
return false;
}
else if(password.length<8)
{
document.getElementById("message").innerHTML="Password must be at least 8 characters long";
return false;
}
if(password.length > 15) {
document.getElementById("message").innerHTML = "** length must not exceed 15 characters";
return false;
}
else {
alert("Password is correct");
document.write("form has been submitted successfully");
}
}
</script>
</head>
<body>
<h1 style="color:Orange">Login Form</h1>
<form name="myform" action="#" onsubmit="return validateform()">
<label for="username">Username:</label>
<input type="text" name="username" id="username"> <br><br>
<label for="password">Password:</label>
<input type="password" name="password" id="password">
<br><br>
<span id = "message" style="color:orange"> </span> <br><br>
<input type="submit" value="Submit" style="border-color:orange">
<button type = "reset" value = "Reset" style="border-color:orange">Reset</button>
</form>
</body>
</html>
Validation form with Confirm password
<!DOCTYPE html>
<html>
<head>
<center>
<title>JavaScript Tutorial</title>
<script type="text/javascript">
function validateform(){
var username= document.getElementById("username").value;
var password=document.getElementById("password").value;
var repassword=document.getElementById("repassword").value;
if(username== ""){
document.getElementById("blankMsg").innerHTML="**Fill the User name";
return false;
}
if(!isNaN(username))
{
document.getElementById("blankMsg").innerHTML="**Only characters are allowed";
return false;
}
if(password=="")
{
document.getElementById("message1").innerHTML="**Fill the password please";
return false;
}
if(repassword=="")
{
document.getElementById("message2").innerHTML="Enter the password please!";
return false;
}
if(password.length<8)
{
document.getElementById("message").innerHTML="Password must be at least 8 characters long";
return false;
}
if(password.length > 15) {
document.getElementById("message").innerHTML = "** length must not exceed 15 characters";
return false;
}
if(password!=repassword)
{
document.getElementById("message2").innerHTML = "**Passwords are not same! Retry with new Password";
return false;
}
else {
alert ("password created successfully");
document.write("form has been submitted successfully");
}
}
</script>
</head>
<body>
<h1 style="color:Orange">Login Form</h1>
<form name="myform" action="#" onsubmit="return validateform()">
<label for="username">Username:</label>
<input type="text" name="username" id="username"> <br><br>
<span id = "blankMsg" style="color:orange"> </span> <br><br>
<label for="password">Password:</label>
<input type="password" name="password" id="password">
<br><br>
<span id = "message1" style="color:orange"> </span> <br><br>
<label for="password">Re-password:</label>
<input type="password" name="repassword" id="repassword">
<br><br>
<span id = "message2" style="color:orange"> </span> <br><br>
<input type="submit" value="Submit" style="border-color:orange">
<button type = "reset" value = "Reset" style="border-color:orange">Reset</button>
</form>
</body>
</center>
</html>
Output
Student Registration form
studentregistration.html
<html>
<head>
<script type="text/javascript" src="validateform.js"></script>
<style>
ul {list-style-type:none;}
form{
background-color: #DCDCDC;
}
</style>
</head>
<body>
<form action="#" name="StudenSignupForm" onsubmit="return(validateHTMlform());">
<div cellpadding="2" width="20%" bgcolor="99FFFF" align="center"
cellspacing="2">
<ul>
<li>
<center><font size=4><b>Student Registration Form</b></font></center>
</li>
</ul>
<ul>
<li>First Name</li>
<li><input type=text name=textnames id="textname" size="30"></li>
</ul>
<ul>
<li>
Last Name</li>
<li><input type=text name=lastnames id="lastname" size="30"></li>
</ul>
<ul>
<li>Father Name</li>
<li><input type="text" name="full_father_name" id="fathername"
size="30"></li>
</ul>
<ul>
<li>Address</li>
<li><input type="text" name="personal_address"
id="personaladdress" size="30"></li>
</ul>
<ul>
<li>Gender</li>
<li><input type="radio" name="sex" value="male" size="10">Male
<input type="radio" name="sex" value="Female" size="10">Female</li>
</ul>
<ul>
<li>City</li>
<li><select name="City">
<option value="-1" selected>select..</option>
<option value="KOLKATA">KOLKATA</option>
<option value="CHENNAI">CHENNAI</option>
<option value="PUNE">PUNE</option>
<option value="JAIPUR">JAIPUR</option>
</select></li>
</ul>
<ul>
<li>Course</li>
<li><select name="Course">
<option value="-1" selected>select..</option>
<option value="B.Tech">B.TECH</option>
<option value="MCA">MCA</option>
<option value="MBA">MBA</option>
<option value="BCA">BCA</option>
</select></li>
</ul>
<ul>
<li>State</li>
<li><select Name="State">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Bihar">BIHAR</option>
</select></li>
</ul>
<ul>
<li>District</li>
<li><select name="Disulict">
<option value="-1" selected>select..</option>
<option value="Nalanda">NALANDA</option>
<option value="UP">UP</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></li>
</ul>
<ul>
<li>PinCode</li>
<li><input type="text" name="pin_code" id="pincode" size="30"></li>
</ul>
<ul>
<li>student email</li>
<li><input type="text" name="email_id" id="emailid" size="30"></li>
</ul>
<ul>
<li>Date Of Birth</li>
<li><input type="text" name="date_of_birth" id="dob" size="30"></li>
</ul>
<ul>
<li>Mobile Number</li>
<li><input type="text" name="mobilenumber" id="mobile_no" size="30"></li>
</ul>
<ul>
<li><input type="reset"></li>
<br>
<li colspan="2"><input type="submit" value="Submit Form" /></li>
</ul>
</div>
</form>
</body>
</html>
validateform.js
function validateHTMlform()
{
let form = document.StudenSignupForm;
if( form.textnames.value == "" )
{
alert( "Enter Your First Name!" );
form.textnames.focus() ;
return;
}
if( form.lastnames.value == "" )
{
alert( "Enter Your Last Name!" );
form.textnames.focus() ;
return;
}
if( form.fathername.value == "" )
{
alert( "Enter Your Father Name!" );
form.fathername.focus() ;
return;
}
if( form.paddress.value == "" )
{
alert( "Enter Your Postal Address!" );
form.paddress.focus() ;
return;
}
if( form.personaladdress.value == "" )
{
alert( "Enter Your Personal Address!" );
form.personaladdress.focus() ;
return;
}
if ( ( StudenSignupForm.sex[0].checked == false ) && ( StudenSignupForm.sex[1].checked == false ) )
{
alert ( "Choose Your Gender: Male or Female" );
return false;
}
if( form.City.value == "-1" )
{
alert( "Enter Your City!" );
form.City.focus() ;
return;
}
if( form.Course.value == "-1" )
{
alert( "Enter Your Course!" );
return;
}
if( form.District.value == "-1" )
{
alert( "Select Your District!" );
return;
}
if( form.State.value == "-1" )
{
alert( "Select Your State!" );
return;
}
if( form.pincode.value == "" ||
isNaN( form.pincode.value) ||
form.pincode.value.length != 6 )
{
alert( "Enter your pincode in format ######." );
form.pincode.focus() ;
return;
}
var email = form.emailid.value;
atpos = email.indexOf("@");
dotpos = email.lastIndexOf(".");
if (email == "" || atpos < 1 || ( dotpos - atpos < 2 ))
{
alert("Enter your correct email ID")
form.emailid.focus() ;
return;
}
if( form.dob.value == "" )
{
alert( "Enter your DOB!" );
form.dob.focus() ;
return;
}
if( form.mobileno.value == "" ||
isNaN( form.mobileno.value) ||
form.mobileno.value.length != 10 )
{
alert( "Enter your Mobile No. in the format 123." );
form.mobileno.focus() ;
return;
}
return( true );
}
No comments:
Post a Comment