[jQuery] Need Help with form Validation
Hi all,
I've been working on this site which has a couple of pretty long forms
and I've been working on its validation. I have a few issues I still
need to work through and I'm drawing a blank. The first two things are
probably simple to solve but I don't see how. I'm using the
Bassistance Validation plugin.
First, I have a text field for a URL and I would like the http:// part
to be filled in automatically if there's no data in the field. The
client has been testing it and the validation routine flags the field
as invalid if a user enters only something like "www.example.com".
Secondly, I'm using another text field for user to enter a birth date.
The site is in French so the format needs to be "dd/mm/yyyy". I would
like to implement an input mask so users can only type in the numbers
and the forward slashes are added automatically but have it be smart
enough to take it if the user does enter the slashes. Also, I would
like the validation routine to make sure the format entered is really
"dd/mm/yyyy" which means "08/08/2008" would be accepted but
"08/27/2008" (mm/dd/yyyy) would not (or yyyy/xx/xx would also be
refected). Is any or all of that possible?
Finally, this form has been made more complex because I'm separating
it into sections using JQuery UI's Tabs plugin. That part works well
but the client has asked me for specific behavior I'm not sure how to
implement. If you look at the following:
http://staging.webfocusdesign.com/qfq_emplois/inscription-professionnels.shtml
You'll see the form has been separated into 3 tabs. At the bottom of
the form are are 3 buttons, the first labelled "Annuler" is a simple
reset button. The second labelled "Poursuivre" is a "Next" or
"Continue" button that moves the user to the next tab or brings them
back to the first one if they are on the 3rd. Last one labelled
"Valider" is the submit button. What the client wants is one of two
things. Ideally, they would like the user to be unable to move to the
next tab if the fields on the current one are not all valid. So I
would need to disable both the "Poursuivre" (Continue) button as well
as the 2 unselected tabs until the particular fields within a
particular tab are all valid. Is that possible and if so, how might I
look at implementing this.
The second option would be to let the user move around the tabs/form
as they which but, if they try to submit the form and it's not all
valid, I would like to be able to bring the user to the first invalid
field which may be on an unselected tab and give it focus.
Any help anyone could provide with any of this would be greatly
appreciated. I'm still quite new to jQuery and I'M not a JavaScript
expert to begin with so I've been struggling a little...
Thanks!