| |
|
If you want to validate the data submitted by your user then you you can use
1) Client side form validation using javascript - Here the data is validated in the client machine as and the error done by the user can be notified in the same page, without sending the data to the server. Advantage - This is fast because it saves the round-trip time to post the data from client to the server and get the result back to the client from the server. Disadvantage - If can not validate the data against the data that resides in your server, i.e. , data from the database.
Example - You can validate if the format of the email address given by the user is correct using Javascript, But can not validate if the user already exist in your database .
2)Server-side validation using ASP,JSP,PHP etc - Here the data is sent to the server and it is validated in the server and the result to the client. Advantage - You can validate the data against the database that resides in your server. Disvantage - It is slow
Here we will develope a form that validates the data posted by the user.
You can see the form in action here.
Client-side form validation using JavaScript-
Code for this form :
<body>
<form name="form1" method="post" action="welcome.php" >
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25%">Username * </td>
<td width="75%"><input name="txtname" type="text" ></td>
</tr>
<tr>
<td>Address</td>
<td><input name="txtaddress" type="text" > </td>
</tr>
<tr>
<td>E-mail*</td>
<td><input name="txtemail" type="text" ></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="Submit" value="Submit" onClick="return f1()" >
<input type="reset" name="Submit2" value="Reset"></td>
</tr>
</table>
</form>
</body>
Now see that the javascript function to validate the form data is "f1()". "f1()" returns true if the data are correct and returns false if not correct. This return value is passed to submint button , thus submit button gets true value if "f1()" returns ture and the data are posted, otherwise data is not posted.
<head>
<script language="JavaScript">
function f1(){
// check if user has filled the name field
if (document.forms[0].txtname.value.length==0 ) {
alert("Please fill the UserName properly");
return false;
}
if ((document.forms[0].txtemail.value.length==0) || (document.forms[0].txtemail.value.indexOf('@',0)==-1 )
|| ( document.forms[0].txtemail.value.indexOf('.',0)==-1) ){
alert("Please fill the E-Mail properly");
return false;
}
// if everything okay return true , goto accept form
return true;
}
</script>
</head>
Explanetion of the code :
We can find the the no of letters written by the user on a textbox by the statement
document.forms(0).txtname.value.lengthwhere "document" is the current webpage, "forms(0)" if the first form in the document{you replace this with name of the form if you wish), "txtname" is the name of the textbox(This is name that you have given to the textbox while designing the form in html, the case must be same), "value" is the letters that has been written on the textbox by the user, "length" is the number of letters writter written on the textbox.
So, with this code we are checking if the number of letters written by the user is greater than 0, if not we show a messagebox to the user using "alert" and return false.
For the email field we are additionally checking if it contains '@' symbol [(document.forms[0].txtemail.value.indexOf('@',0)==-1 )] and '.' [( document.forms[0].txtemail.value.indexOf('.',0)==-1)]. At the end if everything is okay then "retun true "
So, that is so simple. I hope you like the tutorial.
Thank You.
You can see the form in action here.
Back to Tutorial Index page
You can send your comments to admin@koderguru.com
|
|
|
