Validate.js
Validate is a small JavaScript form validation library aimed to help me in the process of building rich and responsive web applications. The Prototype framework is needed to make it work.
The point here is not security, you will never achieve security with client side validation and it's a known paradigm. But with the growing popularity of AJAX, this kind of validation has it's place I think.
This library should be used to enrich the user experience by minimizing server requests and processing, NOT to do actual security. In other words, if you don't double check user inputs on the server side, your website or application will be at risk.
Example
Here a very simple example of how you can use this script:
<input type="text" id="email" class="isValidEmail" value="bob@leponge.com" />
<input type="button" value="Test" onclick="testEmail();" />
function testEmail() {
// $F('email').isValid()
// or $F('email').isValidEmail() would work too.
if (!$V('email')) {
alert('Invalid e-mail !');
}
else {
alert('Valid e-mail !');
}
}
Demo
In theory you can use it to validate entire forms and provide a onError callback function to manage errors, but this function is unfinished and, well untested. So use is at your own risk.
Methods
| isValid |
Will test element against validation(s) specified within his class name.
You can use $V as shortcut ex: $F('amount').isValid() == $V('amount')) In fact for most validation you should use $V, except if you want a greater control over your script. |
|---|---|
| setModified | Will add modified class name to element; |
| setUnmodified | Will remove modified class name to element |
| isModified | Will return true if element has class name modified |
| isUnModified | Will return true if element has not class name modified |
| isEmpty | Will return true if element is empty |
| isNotEmpty | Will return true if element is not empty |
| isValidBoolean | Will return true if the element is a valid boolean (mostly needed for internal use). |
| isValidEmail | Will return true if the element is a valid e-mail address (WARNING: still not 100% reliable, sorry) |
| isValidInteger | Will return true if the element is a valid integer |
| isValidNumeric | Will return true if the element is a valid numeric value (int or float) |
| isValidAlphaNumeric | Will return true if the element is a valid numeric or alphabetic |
| isValidDatetime | Will return true if the element is a valid datetime format (MySQL), (WARNING: this function does not ensure that the date is valid in the calendar) |
| isValidDate | Will return true if the element is a valid date format (MySQL), (WARNING: this function does not ensure that the date is valid in the calendar) |
| isValidTime | Will return true if the element is a valid time format (MySQL), (WARNING: this function does not ensure that the date is valid in the calendar) |
| isValidIPv4 | Will return true if element is a valid IP address, IPv6 will come when I'll be a regex Jedi |
| isValidCurrency |
Will return true if element is a valid currency
Some valid formats:
|
| isValidSSN | Will return true if element is a valid Social Security Number (Canada) |
| isValidSIN | Will return true if element is a valid Social Insurance Number (Canada) |
Downloads
- Validate.zip 0.9
- Validate.tar.gz 0.9
- Validate.js (latest from the SVN repository)
SVN users who wants to checkout the trunk use this:
<p><div class="code_highlight"><pre>svn checkout http://validation-js.googlecode.com/svn/trunk/ validate-js </pre></div> </p>Don't hesitate to send me comments, fixes or ideas, I'm open to suggestions!