HOW TO VALIDATE HTML FORM USING JAVASCRIPT
Hello readers in this tutorial you will see how to validate a basic HTML form using JavaScript. Below i have created a simple HTML form with the following fields Username that should be minimum 6 and maximum 15 in length, First Name that should be minimum 3 and maximum 15 in length, Last Name hat should be minimum 3 and maximum 15 in length, Password hat should be minimum 6 and maximum 15 in length, Confirm Password hat should be equals to Password and Contact hat should be minimum 10 and maximum 10 in length.
See Below Example.
Try above example.
Hello readers in this tutorial you will see how to validate a basic HTML form using JavaScript. Below i have created a simple HTML form with the following fields Username that should be minimum 6 and maximum 15 in length, First Name that should be minimum 3 and maximum 15 in length, Last Name hat should be minimum 3 and maximum 15 in length, Password hat should be minimum 6 and maximum 15 in length, Confirm Password hat should be equals to Password and Contact hat should be minimum 10 and maximum 10 in length.
See Below Example.
<html lang="en">
<head>
<title>My Registration Form</title>
<!--
Required meta tags -->
<meta
charset="utf-8">
<meta
name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<!--
Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
#username,#fname,#lname,#password,#cpassword,#contact{
width: 330px;
}
span{
color:red;
}
</style>
</head>
<body
style="background-color:beige;"><br/><br/>
<form method="POST"
action="SomeAction" name="myform" id="myform">
<div
class="container">
<div
class="form-group">
<center>
<h4>Create Account<br/></h4>
<b>Username</b> <br/>
<input type="text" class="form-control"
id="username" name="username"
placeholder="Username"
required="required"/>
<span style="display:none"
id="usernameError">Please Enter Valid Username Min 6 Max
15*</span>
<b>Enter First Name</b><br/>
<input type="text" class="form-control"
id="fname" name="fname" placeholder="Enter First
Name"
required="required"/>
<span style="display:none"
id="fnameError">Please Enter First Name Min 3 Max 15*</span>
<b>Enter Last Name</b><br/>
<input type="text" class="form-control"
id="lname" name="lname" placeholder="Enter Last
Name" required="required"/>
<span style="display:none"
id="lnameError">Please Enter Last Name Min 3 Max 15*</span>
<b>Enter Password </b><br/>
<input type="password" class="form-control"
id="password" name="password" placeholder="Enter
Password!"
required="required"/>
<span style="display:none"
id="passwordError">Password Should Be Min 6 Max 15 In
Length*</span>
<b>Confirm Password</b><br/>
<input
type="password" class="form-control"
id="cpassword" name="cpassword" placeholder="Confirm
Password" required="required" />
<span style="display:none"
id="cpasswordError">Password Mismatch*</span>
<b>Enter Contact</b><br/>
<input type="number" class="form-control"
id="contact" name="contact" placeholder="Contact"
required="required" />
<span style="display:none"
id="contactError">Please Enter Valid Contact Min 10 Max 10*</span>
<br/>
<button type="button" class="btn btn-primary"
style="width:100px;"
onclick="validateMyForm()">Submit</button>
</center>
</div>
</div><!--End Of Container-->
</form>
<script
type="text/javascript">
function
validateMyForm(){
document.getElementById('usernameError').style.display='none';
document.getElementById('passwordError').style.display='none';
document.getElementById('cpasswordError').style.display='none';
document.getElementById('fnameError').style.display='none';
document.getElementById('lnameError').style.display='none';
document.getElementById('contactError').style.display='none';
if(document.getElementById('username').value.length < 6 ||
document.getElementById('username').value.length > 15){
document.getElementById('usernameError').style.display='block';
}
else
if(document.getElementById('fname').value.length < 3
||document.getElementById('fname').value.length > 15){
document.getElementById('fnameError').style.display='block';
}
else
if(document.getElementById('lname').value.length < 3
||document.getElementById('lname').value.length > 15){
document.getElementById('lnameError').style.display='block';
}
else
if(document.getElementById('password').value.length < 6 ||document.getElementById('password').value.length
> 15){
document.getElementById('passwordError').style.display='block';
}
else
if(document.getElementById('cpassword').value !=
document.getElementById('password').value){
document.getElementById('cpasswordError').style.display='block';
}
else
if(document.getElementById('contact').value.length < 10
||document.getElementById('contact').value.length > 10){
document.getElementById('contactError').style.display='block';
}
else
{
document.write('Form Submitted Successfully');
}
}
</script>
</body>
</html>
Try above example.
No comments