fValidator
by Fabio Zendhi Nagao (http://zend.lojcomm.com.br)
fValidator is an open source (free) unobtrusive javascript tool for easy handling form validation.
index:
- Index
- Abstract
- Examples
- Browser compatibility
- Features
- Usage
- License
- Download
- Version history
- Comments
abstract:
Nowadays everybody knows that javascript can be used to validate input data in HTML forms before sending off the content to a server. Despite of that, when there are many fields in the form, the JavaScript validation becomes too complex and boring to code. That's why fValidator exists, with it form validations are many times easier.
examples:
 |
 |
browser compatibility:
fValidator is compatible and tested in Internet Explorer, Firefox (and its mozilla friends), Opera and Safari (thanks ???? for testing it). But it should work in other browsers too... If you successfully find another compatible browser, please let me know ;)
features:
Here's a brief list of the most important features:
- Works perfect with iMask as it's complement.
- Multiple forms per page supported.
- Number of verified fields is not limited.
- Number of filters per field is not limited.
- Predefined formats: required, alpha, alphanum, integer, real, date, email, phone, url. (all customizable)
- Support to register missing formats.
- Highlight fields onValid and onInvalid.
- Error reporting just after onBlur.
- Easy to set and maintain.
- Unobstrutive and XHTML Strict friendly.
fValidator is fully configurable. You can change any default option just initializating the class with an object in JSON. The following options are available:
- (string) msgContainerTag (default "div")
- (string) msgClass (default "fValidator-msg")
- (object) styleNeutral (default {"background-color": "#ffc", "border-color": "#cc0"})
- (object) styleInvalid (default {"background-color": "#fcc", "border-color": "#c00"})
- (object) styleValid (default {"background-color": "#cfc", "border-color": "#0c0"})
- (function) onValid (default Class.empty)
- (function) onInvalid (default Class.empty)
- (object) fValidate[x], x ∈ X := {"required","alpha","alphanum","integer","real","date","email","phone","url"}
- (string) type - any element of the above X set
- (regexp) re - regular expression attached to the type
- (string) msg - message attached to the invalid re match
how to use:
First of all, fValidator is built over MooTools v1.1, so both libraries are required.
Get MooTools at http://mootools.net and fValidator here. Use IceBeat Packito to see mootools dependences.
With scripts in hands, include them between your "head" definition:
license:
This piece of code is is released under the Open Source MIT license, which permits you to use it and modify it in every circumstance. For more details read it below:
The MIT License
Copyright (c) 2007 Fabio Zendhi Nagao - http://zend.lojcomm.com.br
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
download:
fValidator is available in the formats below:
- packed version : Ultra compressed version (3.77KB) - The ready to use "as it is" version.
- full version : Full version (7.20KB) - For developers who needs to change or just study it.
version history:
05/22/2007 : v1.0 - first public release
comments:
- View All
- 1
- 2
- 3
- 4
- Next
doesn't work5/23/2007 12:03:04 PMAuthor:
oeps, it does work, just mm/dd/yyyy is a little strange :)It's not strange... i want a date to be in the US Date Format, so mm/dd/yyyy should be ok and dd/mm/yyyy not... sorry, but there's nothing.
Fabulous job5/26/2007 1:26:29 AMAuthor:
Hi Fabio Zendhi Nagao,
A job well done.
As part of a website redesign I am thinking of cleaning up old javascript validatio code. I am actually thinking along these lines and to my surprise I came accross this site. It makes my job a work a lot easier.
Thanks a lot.
Cheers
Siva
A job well done.
As part of a website redesign I am thinking of cleaning up old javascript validatio code. I am actually thinking along these lines and to my surprise I came accross this site. It makes my job a work a lot easier.
Thanks a lot.
Cheers
Siva
My feedback5/26/2007 8:36:24 AMAuthor:
The form layout is destroyed when the error messages appear. First the title of the field is to the left of the desired input widget, then it aligns to the left of the error message. I hope this isn't the inteded way for it to work, as I find it to be a sub-optimal solution.
Is there a possibility to check a date written using the European standard "out of the box"? (ie yyyy-mm-dd)
Apart from my small critizism above. It seems really nice! fValidator is based in regular expressions and all pre-defined types are customizable at class initialization. So, you can just change the pre-defined date or make a custom validation.
Is there a possibility to check a date written using the European standard "out of the box"? (ie yyyy-mm-dd)
Apart from my small critizism above. It seems really nice! fValidator is based in regular expressions and all pre-defined types are customizable at class initialization. So, you can just change the pre-defined date or make a custom validation.
A few tweaks5/26/2007 10:39:26 AMAuthor:
Just two little glitches
1) The Email Validation in the provided example form does not allow for email addresses in the format username+tag@server.com, which has recently become quite popular through the GMail support for same.
2) Blank fields trigger validation. Tabbing forward and then back to a previous field triggers the validation action, which can be a bit confusing for some users. Adding an option to prevent validation when a field is blank would be nice.
And one suggestion
1) The current system seems to allow for specifying of number and text entries, but allowing for the specification of specific number or characters (a la RegExp - "[0-5][A-F]", etc. would be great.
Apart from that - wonderful!Hi Luke, thanks for posting. Here's the answers:
1) Next release will change the expression to allow "+".
2) If a field is required, then it could not be left blank. That's why blank fields trigger validation. But maybe we could have an option to set the validation trigger between onChange and onBlur.
3) You can dinamically change any default validation class at initialization or set your own custom validation as explained in "how to use".
1) The Email Validation in the provided example form does not allow for email addresses in the format username+tag@server.com, which has recently become quite popular through the GMail support for same.
2) Blank fields trigger validation. Tabbing forward and then back to a previous field triggers the validation action, which can be a bit confusing for some users. Adding an option to prevent validation when a field is blank would be nice.
And one suggestion
1) The current system seems to allow for specifying of number and text entries, but allowing for the specification of specific number or characters (a la RegExp - "[0-5][A-F]", etc. would be great.
Apart from that - wonderful!Hi Luke, thanks for posting. Here's the answers:
1) Next release will change the expression to allow "+".
2) If a field is required, then it could not be left blank. That's why blank fields trigger validation. But maybe we could have an option to set the validation trigger between onChange and onBlur.
3) You can dinamically change any default validation class at initialization or set your own custom validation as explained in "how to use".
feedback5/27/2007 6:33:55 AMAuthor:
Looks quite good for me. I've not tested the email validation against RFC822 , but i think it's impossible to validate this in one RegExp. A RFC822 conforming validation can be found here: http://rosskendall.com/files/rfc822validemail.js.txt
Beside this I'm missing some basic validation functions:
- min/max: minimum and maximum values for fields
- minlength: minimum length of input
Apart from that - Well done!Thanks for you suggestions Sam, i'll be adding them soon.
Beside this I'm missing some basic validation functions:
- min/max: minimum and maximum values for fields
- minlength: minimum length of input
Apart from that - Well done!Thanks for you suggestions Sam, i'll be adding them soon.
CSS5/29/2007 1:02:06 AMAuthor:
Nice. But is it strange to put the CSS into the js file?What?
Anything to do with Peter Bailey's fValidate?5/29/2007 3:35:17 AMAuthor:(http://sonnygill.wordpress.com)
Hi Fabio,
Good to see this library.
I first came across this idea in Peter Bailey's fValidate library. See http://www.phil-taylor.com/fValidate/ (His original site is sadly no longer active).
Is there any connection between the two?
Cheers,
Sonny
(P.S. - my rating in this post does not mean anything. I haven't checked this out yet, but I will be sure to)Nopz, this class has nothing to do with Peter Bailey's one. I've never saw that link before it appeared in ajaxian comments.
Good to see this library.
I first came across this idea in Peter Bailey's fValidate library. See http://www.phil-taylor.com/fValidate/ (His original site is sadly no longer active).
Is there any connection between the two?
Cheers,
Sonny
(P.S. - my rating in this post does not mean anything. I haven't checked this out yet, but I will be sure to)Nopz, this class has nothing to do with Peter Bailey's one. I've never saw that link before it appeared in ajaxian comments.
OnChange5/29/2007 6:53:48 AMAuthor:
Hi,
I would like to second the request for a "onChange/onBlur" feature. E.g. if a field is left blank intentionally (e.g. the user wants to revisit it after filling other fields out), it would be useful if it wasn't flagged as "invalid".
I would like to second the request for a "onChange/onBlur" feature. E.g. if a field is left blank intentionally (e.g. the user wants to revisit it after filling other fields out), it would be useful if it wasn't flagged as "invalid".
Edit color error info?5/30/2007 4:11:37 PMAuthor:
Hi, i insert the data required functions on my input areas, and i get the field required alert, but the text isnt styled and the layer is with no color, i want it to look it like the fvalidator example.
i looked at the code, but i cant find where i can edit this.
Plz help.
ThanksOh! Sorry my mistake... all the styles are done by css. The example styles are:
.fValidator-form fieldset {
border: 1px solid #ccc;
padding: 10px;
}
.fValidator-form legend {
padding: 0 5px;
}
.fValidator-form input, select {
font-family: Arial;
color: #666;
}
.fValidator-form input {padding: 2px;}
.full {width: 100%;}
.half {width: 50%; vertical-align: top;}
.fValidator-msg {
background-color: #c00;
font-size: 85%;
color: #fff;
padding: 5px;
}
i looked at the code, but i cant find where i can edit this.
Plz help.
ThanksOh! Sorry my mistake... all the styles are done by css. The example styles are:
.fValidator-form fieldset {
border: 1px solid #ccc;
padding: 10px;
}
.fValidator-form legend {
padding: 0 5px;
}
.fValidator-form input, select {
font-family: Arial;
color: #666;
}
.fValidator-form input {padding: 2px;}
.full {width: 100%;}
.half {width: 50%; vertical-align: top;}
.fValidator-msg {
background-color: #c00;
font-size: 85%;
color: #fff;
padding: 5px;
}
Edit color error info?5/30/2007 9:01:17 PMAuthor:
Hi, i insert the data required functions on my input areas, and i get the field required alert, but the text isnt styled and the layer is with no color, i want it to look it like the fvalidator example.
i looked at the code, but i cant find where i can edit this.
Plz help.
ThanksYou need the imask to use the masks in your input field.
i looked at the code, but i cant find where i can edit this.
Plz help.
ThanksYou need the imask to use the masks in your input field.
@William Re:Edit color error info?6/1/2007 12:45:17 PMAuthor:
William, I think this is what you're looking for.
When you initialize the validator, set your color options like this..
var myValidator = new fValidator("myForm", {
styleNeutral: {"background-color": "#ffc", "border-color": "#cc0"},
styleInvalid: {"background-color": "#fcc", "border-color": "#c00"},
styleValid: {"background-color": "#cfc", "border-color": "#0c0"},
);
Just change the values for each style as you want them.
When you initialize the validator, set your color options like this..
var myValidator = new fValidator("myForm", {
styleNeutral: {"background-color": "#ffc", "border-color": "#cc0"},
styleInvalid: {"background-color": "#fcc", "border-color": "#c00"},
styleValid: {"background-color": "#cfc", "border-color": "#0c0"},
);
Just change the values for each style as you want them.
Color6/4/2007 10:07:22 PMAuthor:
Can you make one change? It would be better if the color always changes to green when it validates, rather than changing to green only if it was previously read.
I think it confuses the user to see two colors, both green and yellow upon submit. Ideally it would be all green upon submit, indicating that all fields are valid.
Thank you and great work!Hm... you can setup this @ initialization.
I think it confuses the user to see two colors, both green and yellow upon submit. Ideally it would be all green upon submit, indicating that all fields are valid.
Thank you and great work!Hm... you can setup this @ initialization.
Initialization 6/11/2007 1:01:29 AMAuthor:
Hi,
Thanks for the suggestion, but I'm a little confused... If I do this:
var myValidator = new fValidator("myForm", {
styleNeutral: {"background-color": "#cfc", "border-color": "#cc0"},
styleInvalid: {"background-color": "#fcc", "border-color": "#c00"},
styleValid: {"background-color": "#cfc", "border-color": "#0c0"},
);
That makes everything green by default. Not sure how to set it so that it's green only if it's been validated, rather than being validated after it was invalid, or being neutral. Thanks for the help!
Thanks for the suggestion, but I'm a little confused... If I do this:
var myValidator = new fValidator("myForm", {
styleNeutral: {"background-color": "#cfc", "border-color": "#cc0"},
styleInvalid: {"background-color": "#fcc", "border-color": "#c00"},
styleValid: {"background-color": "#cfc", "border-color": "#0c0"},
);
That makes everything green by default. Not sure how to set it so that it's green only if it's been validated, rather than being validated after it was invalid, or being neutral. Thanks for the help!
Relevant errors6/12/2007 2:02:35 AMAuthor:
Is there a way to make it display only relevant errors? This is what someone was complaining about it before--being verbose.
So if they skip a field, just say "required field" rather than saying everything.
Oo? All errors are relevant... each error stands for a type of validation.
So if they skip a field, just say "required field" rather than saying everything.
Oo? All errors are relevant... each error stands for a type of validation.
Names, length6/12/2007 2:03:43 AMAuthor:
Also built-in validations for "name" and "length" would be nice... :)
Alpha doesn't quite cut it for names.
Alpha doesn't quite cut it for names.
options.re6/13/2007 6:50:47 AMAuthor:
Seems to be a really great work! Thanks!
But theres one little problem...
While filling out a required field there appears this JS-Error-Message:
"options.re has no properties"
It appears in the default-else part of _validate. I don't know if it appears anywhere else, because I just tested this one.hmnmnm... any example?
But theres one little problem...
While filling out a required field there appears this JS-Error-Message:
"options.re has no properties"
It appears in the default-else part of _validate. I don't know if it appears anywhere else, because I just tested this one.hmnmnm... any example?
date format6/14/2007 2:31:36 AMAuthor:
It would be nice if there could be support for different date formats. For instance Australia uses dd/mm/yyyy.
What would be the fValidate type for that format?Hi Rob,
You can change the date regexp to fit your country format xD
What would be the fValidate type for that format?Hi Rob,
You can change the date regexp to fit your country format xD
Mr6/20/2007 6:50:51 AMAuthor:
Hi all,
Im unable to create a form with these validations. Its doesnt work. Can u please
tell me all the steps that i have to do. I have include mootools.js and fvalidator.js. After that wrote script like this.
<script type="text/javascript">
window.addEvent("domready", function() {
var exValidatorA = new fValidator("exA");
});
</script>
The form id is exA. But it is not working. No results. nothing validate.
Please let me know.
Thanks.Hi niraan, you need to configure the validations in each field to get it validated.
Im unable to create a form with these validations. Its doesnt work. Can u please
tell me all the steps that i have to do. I have include mootools.js and fvalidator.js. After that wrote script like this.
<script type="text/javascript">
window.addEvent("domready", function() {
var exValidatorA = new fValidator("exA");
});
</script>
The form id is exA. But it is not working. No results. nothing validate.
Please let me know.
Thanks.Hi niraan, you need to configure the validations in each field to get it validated.
valid first time6/22/2007 9:28:55 PMAuthor:(http://www.oasiz.net)
I agree with John (Initialization 6/11/2007 1:01:29 AM), currently if you enter a valid input first time it does not update to the the green valid status, it remains "neutral".
In order to see the green, you have to make an error within the field!?
Perhaps it can be changed to go from neutral to valid first time.
Any idea how to do this?
Regards,
Rob
In order to see the green, you have to make an error within the field!?
Perhaps it can be changed to go from neutral to valid first time.
Any idea how to do this?
Regards,
Rob
Spanish characters6/23/2007 3:40:05 PMAuthor:
Hi Fabio, i'm trying to fix the regex's code to accept spaces and spanish characters like á,á and ñ in low case and upper case; but i can't fix it... Could you help me?Google for it xD I'm sure someone had already developed a nice regexp for spanish chars
© 2007 Fabio Zendhi Nagao (nagaozen) - http://zend.lojcomm.com.br/
