Well, I got slack last week (personally I blame it on the blog being down for a couple of days) and I didn’t post this plugin as I said I would. Here it is, I’ve got it up on Github and posted a demo page right here. I love this plugin, it’s very flexible, has a whole bunch of rules and it is real simple to start adding your own rules to the code. Obviously you’ll need to know how to write javascript, but if you want to, then you just add your new validation functions and add your test to the huge case statement that handles all the rules.
It’s not easy making a plugin like this simple. Alas, I did not succeed! But with a bit of practice it should be fairly easy to implement and get some good value out of it. You can add your own custom error messages, and stack multiple rules onto the same input field. The style is customisable, as the plugin is only adding and subtracting classes.
I’ve never actually used this plugin so I’m definitely hoping for some feedback on it. There are several regular expressions that could be better. I’m still not convinced about the valid email expression.
I have made the valid date format quite flexible. I added support for the jQuery date picker, but somewhere on testing it broke something, so maybe in the future I can get back to that issue and fix it.
Here’s a list of the available rules:
- min – numeric; minimum length of input
- max – numeric; maximum length of input
- checkboxMin – numeric; minimum number of checkboxes that can be selected
- checkboxMax – numeric; maximum number of checkboxes that can be selected – “true” = all
- fileType – string; file types allowed for file inputs, this is a list of extensions seperated by a comma
- isNumber – boolean; only numbers allowed as an input value
- lettersOnly – boolean; only letters allowed as an input value
- passConfirm – boolean; the field that it is checking the value against
- validURL – boolean; validates a url input – set to “true”. default is false
- validEmail – boolean; checks that the value is a valid emial address
- date – boolean; checks that the value is in a valid date format, supporting some of datepickers format types.
- dateFuture – boolean; checks that the value is a date in the future
- datePast – boolean; checks that the date is in the past
- checkHtmlTags – string; list of tags seperated by commas. eg. “<div>,<p>,<span>” – if empty, checks for all tags. Checks for HTML tags in the input data
- selectNull – string; default value of the select box – used to check against. Data object only, will return error if this is the value
- selectHasValue – boolean; checks whether the default value of the select box is not selected – will test against a true value
- radioReq – boolean; true: a radio btn has to be selected. This will only validate on form submit
- noSpaces – boolean; true: no spaces are allowed in the input
The list of date formats rules:
- numeric values: D,M,Y
- seperators: , / – ” “
- Month values: short and long, word or number
- Day values: short and long
- Valid year range: 1000 – 3000
Have fun with the plugin all. Any suggestions or problems you have let me know. I would love some feedback, as I said, I haven’t used this in a production environment yet and it’s not as tested as some of my other scripts.