Now i am going to describe how to simply validate form using javaScript people use many methods and different methods but as a web developer i always feel easy using this method and this method i always use. You have to care about few things.
- Create a form and in <form tag put onsubmit=”return functionName();” onsubmit return function name will run our function on each call of this function and our function will return true or false, if our function returns false form will not be submitted.
- Give id’s to each input text, etc, and text area so javaScript can get them by ID.
- Put javaScript after your form or in your head section of html where you feel comfortable.
Below is code for this read code carefully i will describe later what this code actually doing.
[code]<form action="#" method="post" onsubmit="return validateForm();">
<table width="100%" cellpadding="10px" cellspacing="0">
<tr>
<td>Name(Required):</td>
<td><input type="text" name="name" id="name" /></td>
</tr>
<tr>
<td>Email(Required):</td>
<td><input type="text" name="email" id="email" /></td>
</tr>
<tr>
<td>Message(Required):</td>
<td><textarea name="message" id="message" /></td>
</tr>
</table>
</form><!–html of form ends here–>[/code]
[code lang=”js”]<script type="text/javaScript">
function validateForm() {
//validating name field
var x = document.getElementById(‘name’).value;
if(x == ”) {
document.getElementById(‘name’).focus();
alert(‘Name cannot be empty.’);
return false;
}
//validating Email address.
var x = document.getElementById(’email’).value;
if(x == ”) {
document.getElementById(’email’).focus();
alert(‘Email cannot be empty.’);
return false;
}
//validating message.
var x = document.getElementById(‘message’).value;
if(x == ”) {
document.getElementById(‘message’).focus();
alert(‘Message cannot be empty.’);
return false;
}
}//end of function validateForm();
</script><!–JavaScript ends here.–>[/code]
Ok on very first line we see we have said action this is place where our form will be submited but we are not submiting our form anywhere so this will submit in same page, next is method we want to post our form or get, i will describe later use of both.
Third thing onsubmit we are calling a function and getting what it returns if this returns true we form will be submitted else not. So we are calling here function validateForm(); .
After that we have given id=”name” to our name input text .
We have give Id=”email” to our input text email. and then to message.
After that we have our script. <script type=”text/javaScript”> this is how script starts and </script> is how javascript ends.
We created a function validForm() and inside that function we created a variable in which we are saying check document and getElementById and inside it we give id name, and then we say get its value and save in variable x. Then we use if condition if x==” x equals to empty then do this, first line will focus on our name so user can easily find what he missed, second line alerts him about his error, and third line returns false so form do not get submit further.
Other two if conditions are doing same but with different ID name. This is how we can create a validateForm function in javaScript and this is how we can validate our forms using javaScript Check below this code working.