www.pickatutorial.com Computer Tutorials
Top eBooks: C/C++ | C# | Android | Mathematics | Database | Cloud | Graphics | Networking | Oracle | Hardware | AI
Top Tutorials: C/C++ | C#.NET | PHP MySQL | Java | Java Script | jQuery | HTML | xHTML | HTML5 | VB Script| CSS
Lessons JavaScript HTML Web Form Validation Bookmark and Share
Tutorial Home
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6
Lesson 7
Lesson 8
Lesson 9
Lesson 10
Lesson 11
Lesson 12
Lesson 13
Lesson 14
Lesson 15
Lesson 16
Lesson 17
Lesson 18
Lesson 19
Lesson 20
Lesson 21
Lesson 22
Lesson 23
Lesson 24
Lesson 25
Lesson 26
Lesson 27
Lesson 28
Lesson 29
Lesson 30
Lesson 31
Lesson 32
Lesson 33
Lesson 34
Lesson 35
Lesson 36
Lesson 37
Lesson 38
Lesson 39
Lesson 40
Lesson 41
Lesson 42
Lesson 43
Lesson 44
Lesson 45
Lesson 46
Lesson 47
Lesson 48
Lesson 49

One of the most important uses of JavaScript is to use it to validate or check the web form data for errors before submitting the same to the web server.

The process of checking that a from has been filled in correctly or not before it is submitted to the web server is called "Form Validation". HTML form validation through JavaScript on the client side helps to reduce unnecessary burdon on the web server.

Client side form validation is an important part of any website that collects and stores user data. From the perspective of a web developer, internet users tend to make mistakes and it is the responsibility of a web developer to deal with such errors.

The following example demonstrates form validation through JavaScript:

<html>
<head>
<script type="text/JavaScript">
function validateForm()
{
var name=document.forms["form1"]["name"].value;
if (name == null || name == "")
{
alert("Name field cannot be empty");
return false;
}
} </script>
</head>

<body>
<form name="form1" action="JavaScript_form_validation.php" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="name">
<input type="submit" value="Submit">
</form>
</body>

</html>

The above code defines a function named validateForm() in the header section of the web page, that validates the form. The form elements are accessed through the document.forms array. Also note the use of the onsubmit="return validateForm()" attribute of the above form. This attribute calls the function validateForm() when the user clicks on the submit button.

If the data checks fail the function alerts the user of the error and the function ends with the following statement:

return false;

We have to end our validation function with the above statement if we want that the data must not be submitted to the web server.

Next >>> Lesson No. 46: HTML Document Object Model







Home - Advertise - Contact - Disclaimer - About Us
© Since 2006 pickatutorial.com -- All Rights Reserved.