Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
267 views

JavaScript Form Validation

JavaScript can be used to validate form fields client-side before submission. Some examples of JavaScript form validation include: 1. Validating that a name field is not empty and a password field has a minimum length of 6 characters. 2. Checking that values entered into a password field and retype password field match each other. 3. Using the isNaN() function to validate that a number field only contains numeric values. 4. Displaying check or unchecked images next to form fields depending on whether the input is valid or invalid, such as validating name and password length. 5. Validating email fields by checking for the presence of an @ character and that there are at least two characters

Uploaded by

datalogdigital
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
267 views

JavaScript Form Validation

JavaScript can be used to validate form fields client-side before submission. Some examples of JavaScript form validation include: 1. Validating that a name field is not empty and a password field has a minimum length of 6 characters. 2. Checking that values entered into a password field and retype password field match each other. 3. Using the isNaN() function to validate that a number field only contains numeric values. 4. Displaying check or unchecked images next to form fields depending on whether the input is valid or invalid, such as validating name and password length. 5. Validating email fields by checking for the presence of an @ character and that there are at least two characters

Uploaded by

datalogdigital
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

JavaScript Form Validation

1. JavaScript form validation


2. Example of JavaScript validation
3. JavaScript email validation

It is important to validate the form submitted by the user because it can have
inappropriate values. So, validation is must to authenticate user.

JavaScript provides facility to validate the form on the client-side so data processing
will be faster than server-side validation. Most of the web developers prefer
JavaScript form validation.

Through JavaScript, we can validate name, password, email, date, mobile numbers
and more fields.

JavaScript Form Validation Example


In this example, we are going to validate the name and password. The name can’t be
empty and password can’t be less than 6 characters long.

Here, we are validating the form on form submit. The user will not be forwarded to
the next page until given values are correct.

1. <script>
2. function validateform(){
3. var name=document.myform.name.value;
4. var password=document.myform.password.value;
5.
6. if (name==null || name==""){
7. alert("Name can't be blank");
8. return false;
9. }else if(password.length<6){
10. alert("Password must be at least 6 characters long.");
11. return false;
12. }
13. }
14. </script>
15. <body>
16. <form name="myform" method="post" action="abc.jsp" onsubmit="return validatef
orm()" >
17. Name: <input type="text" name="name"><br/>
18. Password: <input type="password" name="password"><br/>
19. <input type="submit" value="register">
20. </form>

JavaScript Retype Password Validation


1. <script type="text/javascript">
2. function matchpass(){
3. var firstpassword=document.f1.password.value;
4. var secondpassword=document.f1.password2.value;
5.
6. if(firstpassword==secondpassword){
7. return true;
8. }
9. else{
10. alert("password must be same!");
11. return false;
12. }
13. }
14. </script>
15.
16. <form name="f1" action="register.jsp" onsubmit="return matchpass()">
17. Password:<input type="password" name="password" /><br/>
18. Re-enter Password:<input type="password" name="password2"/><br/>
19. <input type="submit">
20. </form>

JavaScript Number Validation


Let's validate the textfield for numeric value only. Here, we are using 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’s see an interactive JavaScript form validation example that displays correct and
incorrect image if input is correct or incorrect.

1. <script>
2. function validate(){
3. var name=document.f1.name.value;
4. var password=document.f1.password.value;
5. var status=false;
6.
7. if(name.length<1){
8. document.getElementById("nameloc").innerHTML=
9. " <img src='unchecked.gif'/> Please enter your name";
10. status=false;
11. }else{
12. document.getElementById("nameloc").innerHTML=" <img src='checked.gif'/>";
13. status=true;
14. }
15. if(password.length<6){
16. document.getElementById("passwordloc").innerHTML=
17. " <img src='unchecked.gif'/> Password must be at least 6 char long";
18. status=false;
19. }else{
20. document.getElementById("passwordloc").innerHTML=" <img src='checked.gif'/>";
21. }
22. return status;
23. }
24. </script>
25.
26. <form name="f1" action="#" onsubmit="return validate()">
27. <table>
28. <tr><td>Enter Name:</td><td><input type="text" name="name"/>
29. <span id="nameloc"></span></td></tr>
30. <tr><td>Enter Password:</td><td><input type="password" name="password"/>

31. <span id="passwordloc"></span></td></tr>


32. <tr><td colspan="2"><input type="submit" value="register"/></td></tr>
33. </table>
34. </form>

Output:

Enter Name:
Enter Password:
register

JavaScript email validation


We can validate the email by the help of JavaScript.

There are many criteria that need to be follow to validate the email id such as:

o email id must contain the @ and . character


o There must be at least one character before and after the @.
o There must be at least two characters after . (dot).
Let's see the simple example to validate the email field.

1. <script>
2. function validateemail()
3. {
4. var x=document.myform.email.value;
5. var atposition=x.indexOf("@");
6. var dotposition=x.lastIndexOf(".");
7. if (atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length){
8. alert("Please enter a valid e-mail address \n atpostion:"+atposition+"\n dotposition:
"+dotposition);
9. return false;
10. }
11. }
12. </script>
13. <body>
14. <form name="myform" method="post" action="#" onsubmit="return validateemail
();">
15. Email: <input type="text" name="email"><br/>
16.
17. <input type="submit" value="register">
18. </form>

You might also like