Home » Javascript » Article
|
|
| Viewed: 195189 times |
Rating (116 votes): |
|
3.7 out of 5 |
|
|
|
In several other tutorials, we have looked at various functions to check aspects of
form validation :
Here we are going to bring these all together, by writing a ValidateForm function that can
call these, or other similar functions.
You can then adapt this script to validate the particular fields you need in the way you require.
Ammend your <form> tag, so it looks something like this:
<form name=form1 action=address.asp method=post onsubmit="javascript:return ValidateForm(this)">
| |
|
What the onsubmit method does here is waits for the results of the ValidateForm function.
If it returns true, our validation has succeeded - the form entries are in an acceptable form.
If it returns false, there has been an error, and the user will need to correct it before being allowed
to submit the form.
So now let's have a look at the ValidateForm function itself. Exactly how it will look of course will
depend on the fields you need to validate.
function ValidateForm(form)
{
if(IsEmpty(form.account_number))
{
alert('You have not entered an account number')
form.account_number.focus();
return false;
}
if (!IsNumeric(form.account_number.value))
{
alert('Please enter only numbers or decimal points in the account field')
form.account_number.focus();
return false;
}
return true;
}
| |
|
To understand this function, remember that the return statement exits from the function and returns the code to the calling statement.
Therefore, if the field 'IsEmpty', we alert the user, set the focus of the form to the appropriate field, and return false as the result.
The calling statement reads the false value and does not submit the form. The user remains on the same page, with the focus pointing them
to the error of their ways.
If however all the checks are verified, at the end of the ValidateForm function, we have a return true statement, meaning the form will submit
successfully.
|
|
View highlighted Comments
 User Comments on 'Javascript Form Validation function'
|
Posted by :
 Archive Import (Eva) at 22:48 on Wednesday, October 09, 2002
|
Very useful and simple code. Well documented how to use it.
| |
|
Posted by :
Archive Import (bondawg3) at 01:13 on Saturday, December 07, 2002
|
Needs to show the complete code of the form it is validating.
| |
|
Posted by :
Archive Import (Jean) at 15:47 on Monday, March 24, 2003
|
how about validating for all whitespaces in a text box like Comment box?
| |
|
Posted by :
Archive Import (nieA) at 00:58 on Tuesday, April 22, 2003
|
what if i have 2 submit buttons in the form? calling a jsfunction on the onsubmit handler of the form element would cause other submit buttons to not work properly.
| |
|
Posted by :
Archive Import (noman) at 10:39 on Monday, April 28, 2003
|
plz show the all code and how we use the email validation becoz u mentioned only to validation empty and numeric but where is email one
noman
| |
|
Posted by :
Archive Import (soufia) at 17:55 on Saturday, May 03, 2003
|
help me out
form.account_number.focus(); is bringing the focus back to this text field .. right? but wats the
pupose of return false; ?? i forgot plz if any one could help me on this...
| |
|
Posted by :
Archive Import (modeler4) at 13:30 on Thursday, May 15, 2003
|
back to soufia:
return false is, in effect, saying that there was a "mistake", so let the user correct it, you either return true if everything is Ok, or return false if something turns out to not be valid.
| |
|
Posted by :
Archive Import (Laura) at 16:23 on Tuesday, June 10, 2003
|
A printable version of this would really help me :(
| |
|
|
Posted by :
 jackiew at 10:42 on Friday, November 14, 2003
|
Ok, I'm lost. I can't get this to work. I know I'm missing something small and I'm really hoping one of you can find it.
My script reads:
</HEAD>
<script>
function ValidateForm(TrifoldOrder)
{
���if(IsEmpty(TrifoldOrder.Quantity))
���{
������alert('You have not entered a quantity to be ordered. Orders are in increments of 100.')
������TrifoldOrder.Quantity.focus();
������return false;
���}
}
return true;
}
</script>
<BODY bgcolor="#000056" link="#000056" vlink="#000080" alink="#800000">
and my form tag reads:
<form name="TrifoldOrder" method="post" action="trifoldorder.asp?post=yes" onsubmit="javascript:return ValidateForm(TrifoldOrder)">
What am I doing wrong?
Help!
Jackie
| |
|
Posted by :
litu at 01:28 on Friday, December 05, 2003
|
try this out
<form name="TrifoldOrder" method="post" action="trifoldorder.asp?post=yes" onsubmit="javascript:return ValidateForm(this)">
| |
|
Posted by :
benzo at 04:53 on Tuesday, March 09, 2004
|
test
| |
|
Posted by :
bitsnz at 03:21 on Thursday, March 11, 2004
|
Im in a situation where once the validation is true, user data that has been entered must get sent to an xml file on the server for storage. This is no problem BUT once the user enters the data and clicks a button they must be sent to a pay site (ogone) to enter payment details etc. The code to save the data in an xml file is ASP code and ive read that you cant call an ASP function from within javascript (within the validation code). so how can i capture the data (behind the scenes so to speak) while the user gets directed to the pay site?
| |
|
Posted by :
Boogalou at 08:13 on Friday, April 02, 2004
|
Is there any way to make this into a password login? One that doesn't show on view source!
| |
|
Posted by :
pk_on_net at 21:37 on Tuesday, September 28, 2004
|
Hello,
You may try this.
<form name="TrifoldOrder" method="post" action="trifoldorder.asp?post=yes" onsubmit="javascript:return ValidateForm(document.TrifoldOrder)">
| |
|
Posted by :
yguyon at 17:09 on Thursday, October 07, 2004
|
I need help with this.
I have three text field that accept data. The sum of two text field value can't be greater than my third text field.
Any function in Java script?
| |
|
To post comments you need to become a member. If you are already a member, please log in .
 
| RELATED ARTICLES |
Javascript Onload Event
by Jeff Anderson
Sometimes you need to perform an action immediatley after the page has loaded. That's when the onLoad Event Handler comes in handy |
 |
Javascript - Enable and Disable form elements
by Jeff Anderson
This is a relatively little known and under-used feature of javascript which can be very useful in guiding a user through a form. Using the disabled tag, you can switch on and off elements in a form. |
|
Form Validation Function
by Jeff Anderson
A javascript validation function that you can use to validate all types of forms. |
|
Check IsNumeric Function
by Jeff Anderson
A javascript validation function to check whether the details entered by a user are numeric. |
|
JavaScript Field Is Empty Form Validation
by Jeff Anderson
This javascript function allows you to check whether a form field has been completed or not. |
|
Check Email Validation Function
by Jeff Anderson
A javascript validation function to check whether the user has entered a valid email address in a form. |
|
Multiple submit buttons on a single form
by Kiran Pai
This script shows you how to submit the contents of a form to different programs depending on which Submit button you press. Additionally it also shows how to call two different functions when you press the Submit button. |
|
Validate Form and Disable Submit Button
by Marylou Marks
I have a form that validates info, but I also want to disable the submit button. The disable part worked before adding the form validating. |
|
Simple date validation
by Chris Hogben
function that takes a date in three parts, day, month and year - returns true if it's a valid date. |
|
Multiple submit buttons with form validation
by Paul Eckert
This code shows how to redirect a user to multiple sites, depending on which submit button he presses, but only after the form validates correctly. |
|
|
|
