- JavaScript form validation
- Example of JavaScript validation
- JavaScript email validation
Validating the form filled out by the user is crucial, as it may contain unsuitable values. Therefore, implementing validation is essential for verifying the user's authenticity.
JavaScript offers the capability to perform client-side validation of forms, which allows for quicker data processing compared to server-side validation methods. As a result, a majority of web developers tend to favor JavaScript for validating forms.
Utilizing JavaScript, we can perform validation for various fields, including names, passwords, email addresses, dates, mobile numbers, and additional data types.
JavaScript Form Validation Example
In this instance, we will perform validation checks on both the username and the password. The username must not be left blank, and the password must contain a minimum of 6 characters.
In this section, we will perform validation on the form during the submission process. The user will remain on the current page until all provided inputs are accurate and meet the specified criteria.
<script>
function validateform(){
var name=document.myform.name.value;
var password=document.myform.password.value;
if (name==null || name==""){
alert("Name can't be blank");
return false;
}else if(password.length<6){
alert("Password must be at least 6 characters long.");
return false;
}
}
</script>
<body>
<form name="myform" method="post" action="abc.jsp" onsubmit="return validateform()" >
Name: <input type="text" name="name"><br/>
Password: <input type="password" name="password"><br/>
<input type="submit" value="register">
</form>
JavaScript Retype Password Validation
<script type="text/javascript">
function matchpass(){
var firstpassword=document.f1.password.value;
var secondpassword=document.f1.password2.value;
if(firstpassword==secondpassword){
return true;
}
else{
alert("password must be same!");
return false;
}
}
</script>
<form name="f1" action="register.jsp" onsubmit="return matchpass()">
Password:<input type="password" name="password" /><br/>
Re-enter Password:<input type="password" name="password2"/><br/>
<input type="submit">
</form>
JavaScript Number Validation
We will implement validation for the text field to ensure it accepts only numeric values. In this case, we will utilize the isNaN function.
<script>
function validate(){
var num=document.myform.num.value;
if (isNaN(num)){
document.getElementById("numloc").innerHTML="Enter Numeric value only";
return false;
}else{
return true;
}
}
</script>
<form name="myform" onsubmit="return validate()" >
Number: <input type="text" name="num"><span id="numloc"></span><br/>
<input type="submit" value="submit">
</form>
JavaScript validation with image
Let us explore an interactive example of form validation using JavaScript, which showcases an appropriate image for both correct and incorrect inputs based on user entries.
<script>
function validate(){
var name=document.f1.name.value;
var password=document.f1.password.value;
var status=false;
if(name.length<1){
document.getElementById("nameloc").innerHTML=
" <img src='https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image'/> Please enter your name";
status=false;
}else{
document.getElementById("nameloc").innerHTML=" <img src='https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image'/>";
status=true;
}
if(password.length<6){
document.getElementById("passwordloc").innerHTML=
" <img src='https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image'/> Password must be at least 6 char long";
status=false;
}else{
document.getElementById("passwordloc").innerHTML=" <img src='https://placehold.co/400x300/3498db/ffffff?text=Sample+Image'/>";
}
return status;
}
</script>
<form name="f1" action="#" onsubmit="return validate()">
<table>
<tr><td>Enter Name:</td><td><input type="text" name="name"/>
<span id="nameloc"></span></td></tr>
<tr><td>Enter Password:</td><td><input type="password" name="password"/>
<span id="passwordloc"></span></td></tr>
<tr><td colspan="2"><input type="submit" value="register"/></td></tr>
</table>
</form>
Output:
| Enter Name: | |
|---|---|
| Enter Password: |
JavaScript email validation
Email validation can be accomplished using JavaScript.
There are many criteria that need to be follow to validate the email id such as:
- email id must contain the @ and . character
- There must be at least one character before and after the @.
- There must be at least two characters after . (dot).
Let’s examine a straightforward example to verify the email input field.
<script>
function validateemail()
{
var x=document.myform.email.value;
var atposition=x.indexOf("@");
var dotposition=x.lastIndexOf(".");
if (atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length){
alert("Please enter a valid e-mail address \n atpostion:"+atposition+"\n dotposition:"+dotposition);
return false;
}
}
</script>
<body>
<form name="myform" method="post" action="#" onsubmit="return validateemail();">
Email: <input type="text" name="email"><br/>
<input type="submit" value="register">
</form>