Form Validation 3 Almost Ready
More than five years after first creating my Form Validator database I've given it a much-needed revamp and it's nearing being ready for release.
You can play with it here.
For this version the idea remains the same — that, no matter what your JavaScript knowledge level, it's a no hassle way of adding validation to a form, whatever the types of fields. However, this version nows offers a lot more flexibility and power as well as a new way of reporting errors without endless alert boxes.
For now I'll let you play. If you have any feedback or find any bugs to repost, please speak now. Hopefully tomorrow I'll have a Rough Cut article up here with the NSF download. Until then the ultra-curious can find all the code via a good ol' view source.
Skip to the 
You can subscribe to an individual
I can hardly wait for the roughcut w/ nsf, Jake.
As always, you're way ahead of the pack...
Funny how it always seems to work out that you are finding solutions to the exact problems I am facing...this one being simplifying validation! I also noticed you are utilizing prototype.js...You're the man!
Rock(All)-On!
Observation, I'm not sure if I'm a fan of the screen moving down one line with the validation error banner. Perhaps there is a way to combine the "Fields marked with a star (*) are mandatory" with the validation error banner and avoid the shifting.
Very nice! My one complaint: I entered my birthdate in U.S. format (month/day/year), and the error told me to enter a valid and realistic birthdate. I know it's just a test app, but I'd change that before you offend someone! Maybe just tell them to enter a birthdate in the day/month/year format.
High marks for user friendliness in the UI look (based on your screen shot above). Sharp.
I'm with Michael... what about always showing your "fields marked with a star(*) are mandatory" in this space (the space where the error appears), inculd it automatically with the help of an onLoad event listener and then swapp that to the caution symbol / error message when validation fails? You can even keep your fade to draw attention.
Brilliant -- thats why your site is so popular, real world problems solved by real world solutions.
My gripe of the day is why are so many programming books totally f***** useless...
You think to yourself I know I need to do this in the application -- lets say (bit of a metaphore used here :-) after using, go down the garden path with an empty wheelbarrow and return to shed -- which the user would expect and return this value. Hang on I have this expensive programming book OK this looks familiar (bit of excitment) yes I understand this code -- after using wheelbarrow fill with dog shit and then throw into the burning shed be careful of the flames! -- aaaaahhhh..
I can honestly say I have not written all the functions / procedures / controls myself and not once used the 5 books which are gathering dust, I just wish I was developing in domino as I would be here all the time, great site great solution :-)
Best regards
glyn.
Sorry for flaming -- Oops typo meant to say I have and not I have not...!
Excellent work....as usual.
With Michael's and Jerry's comments, I am exploring placing the error message in a floating div tied to the bottom left corner of the field being validated. Give me enough time and maybe I can make it an option; show error in specified DIV, or float the message right under the field itself.
Esther: I think that you can control that using a calendar control that always give you the right date :-D
.::AleX::.
I quick little trick I use for telling people how to enter dates is @ReplaceSubstring(@Text(@Date(99; 11; 22)); "1":"2":"9":"0"; "m":"d":"y":"y")
A quick bit of computed text alongside a field always avoids any confusion.
Overall though a nice bit of work. But I am definitely in Micheals camp of not liking the page dropping down lines. I wonder if it would be possible do add a layered DIV on the screen where teh error messages could appear alongside the fields. Hmmm. Time to play.
@Jeff Try this..
Of course requires Prototype.js... or re-code for non protype.js
//FUNCTION setSPAN(spnid, innerMSG, cName, x, y) - Sets a spans inner html & class to what ever is passed to it.
function setSPAN(spnid, innerMSG, cName, x ,y){
if(spnid!=""){
$(spnid).innerHTML=innerMSG;
$(spnid).className=cName;
if(x!=''){$(spnid).width=x;}
if(y!=''){$(spnid).height=y;}
}
"An ounce of error prevention is worth a pound of error detection."
Whenever possible I like to make errors during data entry impossible. For example, if a field requires numbers, then a key filter that only permits numbers to be entered into a field is a bit better than telling the user they have entered invalid data after they click the submit button.
Dates are always a pain so a date picker of some sort is better. This makes invalid date entry impossible.
In Notes I often do the following:
1. Create a single date field that is hidden from the web..
2. Create three separate fields; month, day and year as list boxes.
3. Add JavaScript to set the number of days in the day field based on the month and year fields.
4. On submission I use formula language to build and validate the single date field.
5. When opening an existing document for editing I use formula language to set the values in the month, day and year fields based on the value in the single date field.
If this is all done correctly it should be impossible to enter an invalid date.
Rob:-]
I never let users touch the date field and have a calendar icon to the right to launch the popup calendar. It ends the date format argument right there. The Blackberry users like it as it makes for quick data entry using links and the selection wheel.
Thanks guys. More feedback there than I'd expected (there's never any way of knowing how much to expect) and some useful ideas.
The problem with any solution that's trying to be one-size-fits-all is that it can never please everyone.
@Michael. I see what you mean, but don't see it as an issue. What it could do is maybe insert a span instead of a div or the CSS could be altered so the "summary", as I've called it, is not block-level on the page.
@Esther. The date format is a configurable property of the Validator object. By default a date type field has this format appended to the end of the error message. When a custom message is used with a date field it doesn't append the format. This is an issue I need to get round somehow.
Still a bit to do bit it's good enough for release I think.
Hey jake - also agree with the whole page dropping down thing, but as u say, can't keep everyone happy - the idea surely is to give easy validation without need for modification for those that are happy with it as-is, and for those that are happy to change can do so...
I couldn't find any bugs - lookin good.
I am not really sure about this. I still think that it should be client side validation. This would reduce the need for the app to make unnecessary trips to the server.
I wasn't complaining about it not accepting my date format; I know there are ways around that. I was just pointing out that the error message produced was a bit, um... insensitive to those of us with age issues!
Re: calendar controls. I've been using Yahoo's calendar widget with a few Domino apps and really liking it.
{Link}
Am I the only one using Firefox? It didn't work for me. There was a "Validator not defined" error when the page loaded and the Submit but didn't work (no doubt due to the undefined Validator)
Mark, what version are you using? I'm using FF 1.5.0.4 and no errors (other than the ones that were supposed to occur via script.)
I get a "Validator not defined" error using IE and Firefox 1.5.0.4. This only haappend when the doc is in read mode.
Hi,
I have a form with Tabs and the Validator is generating an error.
Did anybody had this problem as well and can help?