Thursday, October 4th, 2007

JSValidate: Form Validation Library

Category: JavaScript, Library

JSValidate is a simple library based on Prototype and Script.aculo.us to allow you to do form validation.

You simply use special CSS classes to annotate your form and let the library do the rest. You can see this at work in the demo page.

  1. (* means required)
  2.  
  3. * Your Name: <input type="text" name="visitor" class="jsrequired jsvalidate_alpha" />
  4. * Your Email Address: <input type="text" name="email" class="jsrequired jsvalidate_email" alt="We require a valid email address." />
  5. Subject: <input type="text" name="subject" class="jsvalidate_alphanum" />
  6. * Your message:
  7. <textarea name="message" class="jsrequired" rows="5" cols="30"></textarea>
  8. <input type="submit" value="Send information" />

The set of CSS classes that you can use to annotate the form is:

  • jsrequired – Field must have some sort of value.
  • jsvalidate_number – Any integer; accepts decimal and negative
  • jsvalidate_digits – Only Numbers
  • jsvalidate_alpha – Only letters
  • jsvalidate_alphanum – Only letters, numbers, and underscores.
  • jsvalidate_email – Any valid email address.
  • jsvalidate_uscanzip – US or Canada Zip code; Accepts optional US zip + 4
  • jsvalidate_usstate – Any 2 letter uppercase state of the United States.
  • jsvalidate_usphone – US Phone Number, accepts most common formats.
  • jsvalidate_creditcard – Validates VISA, MasterCard, American Express; formats: no spaces, spaces, or dashes.
  • jsvalidate_ssn – Social Security Number in the format: XXXXXXXXX, XXX XX XXXX, or XXX-XX-XXXXX
  • select-notfirst – This class can be applied to select boxes (drop-downs). It prohibits the user from selecting the first option from the list.

JSValidate

Posted by Dion Almaer at 7:08 am
26 Comments

+++--
3.4 rating from 57 votes

26 Comments »

Comments feed TrackBack URI

If you want a smaller lib, check this out, we use this on some (not all) forms in TinyMCE, will perhaps release it separately soon.

http://tinymce.moxiecode.com/validate/validate.htm

Comment by Afraithe — October 4, 2007

Made a little nicer page for it, just go to:
http://tinymce.moxiecode.com/validate/

Comment by Afraithe — October 4, 2007

How about turning fields red and using the old alert box for the detailed info, for the cases when you don’t have much room

Comment by Seth — October 4, 2007

Make sure to check out the validation code before you use libraries like this. For example, the email validation does not accept emails like sam+mailinglist@gmail.com, which savvy users often use.

This is a bug and could of course be fixed. Just be careful.

Comment by Sam Goldman — October 4, 2007

Another lightweight alternative:
Really easy field validation
http://www.tetlaw.id.au/view/javascript/really-easy-field-validation

Comment by ex-lion-tamer — October 4, 2007

Anybody know of a validation library that can catch drag/drop input in Firefox? Firefox doesn’t give fields focus after dropping text…

Comment by Ben — October 4, 2007

Doesn’t work in Safari. Also I am left wondering why anyone would bother putting up a whole “brand” for a library that really doesn’t do very much.

Lastly.. is the protoype world really going to continue with this disparate development where for every simple little thing I could need I have to go to a seperate maintaner to get it?

Comment by vance Dubberly — October 4, 2007

The library doesn’t cover one of the most basic tasks of form validation – field matching. In fact, it doesn’t seem have any capability for rules involving more then one field.

Having a form validation system based on treating individual fields as objects will always fail because object-oriented thinking does not map to form validation. Form validation is a rules based task.

Comment by Sasha Sklar — October 4, 2007

Don’t forget to validate data on server. This is a must, client side validation is not. If you want to have full comfort, you must write your validator code twice. Zend’s PHP Framework provides some validotor classes: http://framework.zend.com/manual/en/zend.validate.html

Comment by Andi — October 4, 2007

I have a port of that Dexagogo validation library for Mootools:

http://clientside.cnet.com/wiki/cnet-libraries/03-jswidgets/01-cms-and-form-helpers#form.validator.js

Comment by Aaron N. — October 4, 2007

I’ve worked in the validation problem sometime ago. The solution is current out-of-date but covers most of the relevant problems like regular expression matching, field masking, etc…

Someone continued the work and added min chars and other features, but I forgot the name and url.

The URL for my work is: http://zend.lojcomm.com.br/fvalidator/

Hope it help!

Comment by Fabio Zendhi Nagao — October 4, 2007

Hmmm… Apart from the fact that it doesn’t validate the above mentioned email address, I wouldn’t use this for the following reasons:

1. Modifies the String and Array prototypes:
String.prototype.trim, Array.prototype.inArray, etc…
2. It pollutes the global name space with a lot of global functions.
3. Is rather large in size for what it does
4. Requires prototype / scriptaculous…
5. Needs pattern masking
6. Should be unobtrusive, rather than require class names to be attached to elements.

Apart from that, the code is well written, and logically structured, but really should be in it’s own namespace…

Comment by yoink — October 4, 2007

I like the moxicode oddering Afraithe posted! However, it also doesn’t seem to do field matching (eg. for confirming password fields). If it had that I’d probably be using it everywhere. :)

Comment by Michael McCorry — October 4, 2007

*moxiecode
*offering

Comment by Michael McCorry — October 4, 2007

@yoink – there is nothing wrong with modifying the String and Array prototypes! Uggg, get with it. >:(

Comment by Todd — October 4, 2007

I think extending core objects with prototype is not bad, Javascript is flexible and felxibility is good; of course one has to know what he or she is doing + afaik Prototype.js dares to do this, others are playing nicely, so I don’t see a problem here.

Comment by skrd — October 5, 2007

A very good form validation libray is qForms by Dan G. Switzer, II

URL:
http://www.pengoworks.com/index.cfm?action=get:qforms

Comment by Neal — October 5, 2007

I found a good client side validation library. This does regular validations (including regex) and warnings, but has other nifty features too:
* conditional sections (with validation hookup)
* synchronize fields between each other
* validate on submit, or on loss of focus

So far I haven’t found anything better.
http://www.formassembly.com/wForms/

Comment by wafla — October 5, 2007

Zapatec.Form supports:
* masked fields
* ajax validation
* limit keyboard input
* fully customizable error output
* theme driven
* etc etc etc

Comment by Vanger — October 5, 2007

@wafla: I agree with you about wForms. I used it for a large (huge) form project. I had to make numerous extensions and it was a snap.

Comment by Sam Goldman — October 5, 2007

Check out this open source, regex based JavaScript validator

http://sourceforge.net/projects/js-validator/

Comment by Bollysite — October 8, 2007

@ex-lion tamer — thanks for posting that link. The ‘really easy field validation’ works great. I just added it to a form here ( http://valenciacc.edu/40years/nomination.cfm ) and had it running in no time

Comment by Will Peavy — October 8, 2007

I like the general premise, as it’s close to some code I wrote a little while back. However, why not just use simpler class names like “Required” and “ValidEmail”? And why use the alt attribute instead of the title attribute (though that’s a more minor consideration)?

Comment by Eric the .5b — October 8, 2007

http://phpsourcecode.blogspot.com
http://phpsourcecode.blogspot.com
http://phpsourcecode.blogspot.com

Comment by phpsourcecode — October 30, 2007

I thought i’d touch base on some of the comments to hope clear up a few things:

Library Size: Yes it’s a bit large and does require Scriptaculous and Prototype. My next release will have a much more scaled down version that uses smarter code and utilizes those libraries a lot better. As for requiring the other libraries, well, I think they are great libraries, they help you code javascript faster and more cross-browser, I would recommend everyone include them on every site they do. If you don’t like them, there are plenty of other good validation libraries out there. Pick one.

In my final release, there will be many more options as to what happens when validation occurs (alert box, change input style, general message at the top, etc.). I want the library to cover almost ever feature people are using to validate on the web these days.

The email validation expression has been updated to the RFC 2822 Standard in the latest beta. I got a lot of complaints about this and I’m sorry for not being up to par with the latest standards.

Field matching and min/max length will also be in the next release, along with a custom function validater that accept any separate function’s return of true/false.

The reason for using classes such as jsrequired is to keep from invading other people’s classes they’ve already created. As for requiring a class, well, this script was designed with the non-javascript programmer in mind. It’s the easiest way to implement. And why not use the title attribute? Because title is not XHTML compliant for input fields.

Please also note that this is still BETA. I know the web has really run that term into the ground and doesn’t really mean what it used to anymore, however I’m serious when I say that I am NOT finished with this. The site was designed to encourage people to test and provide feedback such as what I have received. I appreciate all the downloads, promotion and support. I hope this script turns out to be everything developers look for in a simple javascript validation script.

Comment by brian dichiara — November 18, 2007

Based on Fabio Zendhi Nagao fValidator, you can also check formcheck.js for mootools. It can perform validation via regex or through custom functions. There is a lot of options and the errors can be displayed using tips or with css.

Here is some demos:
http://mootools.floor.ch/en/labs/

regards.

Comment by DrJ — March 9, 2009

Leave a comment

You must be logged in to post a comment.