JavaScript Form Validation
I created this HTML form validation JavaScript to replace the one that came with Dreamweaver. Often there’s a need to validate selects, radio groups and checkboxes. I got tired of adding additional code to valdiate the unsupported field types using Dreamweavers built-in function, so I wrote this one.
UPDATE: Added in version 1.2, you can now validate field values between two fields, for things such as email or password validation.
This form validation JavaScript will validate the following HTML form input types:
- text
- textarea
- select
- radio group
- checkbox (singular or an array)
Validation possibilities are:
- Required element
- Not required element
- Is email
- Is number
- In range
- Is Match
Directions:
bool ft_formValidate( elementId, empty|matchELementId, R|N[isEmail|isNum|inRangex:z[, mixed]|isMatch] )
Example:
<form onsubmit=”return ft_formValidate(‘First Name’,”,’R'”>
<p>First Name: <input type=”text” name=”name” id=”First Name” /></p>
<input type=”submit” value=”Submit »” />
</form>
Click here to see a working example of possible validations.
Additional Notes:
All fields that use the isNum, isEmail, inRange validation rules that are not required should be preceeded by the letter N. Validation rules are case insensitive meaning that ‘R’ and ‘r’ have the same value. I think it’s easier in the code to read the mixed case such as: ‘RisEmail’ vs ‘risemail’, but either will work.
Each form element to be validated must have a unique id attribute. Radio button groups and checkbox arrays only need an id for one of the elements with in the group or array to be defined. View source of the working example here.
Download:
If you found this script helpful, or any bugs, please let me know.
..
July 28th, 2009 at 9:22 am
This is a nice improvement, but I’d like to make a suggestion. Instead of using the i+1 argument as the match field, let it be the “friendly name” of the form field (for error message purposes) and then modify the isMatch parameter like the inRange param. So a match validation would look like:
‘field_name’,'My Field Name’,'RisMatch:matchfield_name’
The reason for this (other than consistency with the inRange parameter) is that you sometimes can’t choose the field names. I do a lot of integrations with salesforce, and they have their own bizarre naming convention. So if I post a form to their “web to lead” endpoint, some fields might be named first_name and others might be named 00N50000001s8L3!
Of course, the fact that their field names can begin with a number, rather than a letter, is another painful story. ;^)
Regards,
Mike Sharp