Hi, Richard... The only drawback to that approach is that it does require submission of the form to get feedback to the user. On this particular form, which is quite lengthy, I've set it up to provide feedback onblur or onchange while the form is being completed.
I typically avoid using onsubmit client-side validation, since I don't see any difference between that and the server-side validation that I always run, as well. I did work out a solution which seems to be working well. Thanks for the feedback and idea! Rick > -----Original Message----- > From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On > Behalf Of richard.aday > Sent: Monday, January 05, 2009 6:47 AM > To: jQuery (English) > Subject: [jQuery] Re: How to check all required fields after each field is > filled... > > > An easier way to set an onsubmit event handler on the submit button. > Onsubmit, you check all the forms. If it doesn't validate, modify the > DOM to show it to the user. Then _return false_. > > That should stop the submit action. > > On Jan 4, 2:36 pm, "Rick Faircloth" <r...@whitestonemedia.com> wrote: > > Thanks, Joe! > > > > Rick > > > > > > > > > -----Original Message----- > > > From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On > > > Behalf Of Joe > > > Sent: Sunday, January 04, 2009 1:30 PM > > > To: jQuery (English) > > > Subject: [jQuery] Re: How to check all required fields after each field > > > is filled... > > > > > This works, but is not terribly usable as it throws an alert every > > > after every failed scan, but you can easily modify the method to make > > > it more usable, or even simply remove the alert and the button will > > > remain disabled until all required fields are filled in. It could be > > > optimized a bit, but for clarity it's a bit verbose. > > > > > Copy and paste this into a new .html file and load in your browser. > > > > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// > > >www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> > > > <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en-us" lang="en" > > > dir="ltr"> > > > <head> > > > <script type="text/javascript" src="http://ajax.googleapis.com/ > > > ajax/libs/jquery/1.2.6/jquery.js"> > > > </script> > > > <script type="text/javascript"> > > > > > $(function(){ > > > // Cached the wrapped set. > > > $req = $('input.required'); > > > > > // A flag for scan results. > > > $.reqFlag = { > > > pass: null, > > > failMethod: function(){ > > > alert('Please Fill In All Required > > > Fields'); > > > }, > > > passMethod: function(){ > > > > > > $('#submitButton').attr('disabled',false); > > > } > > > } > > > > > // Scan method. > > > $.scan = function(){ > > > $req.each(function(){ > > > !$(this).val() ? $.reqFlag.pass = > > > false : $.reqFlag.pass = > > true; > > > }) > > > !$.reqFlag.pass ? $.reqFlag.failMethod() : > > > $.reqFlag.passMethod(); > > > } > > > > > $req.each(function(){ > > > $(this).blur(function(){ $.scan() }); > > > }); > > > }); > > > > > </script> > > > </head> > > > <body> > > > <form action=""> > > > <input class='required' name="one" type="text" /> > > > <br /> > > > <input class='required' name="two" type="text" /> > > > <br /> > > > <input class='required' name="three" type="text" /> > > > <br /> > > > <input class='required' name="four" type="text" /> > > > <br /> > > > <input type='submit' value='go' id="submitButton" disabled="true" /> > > > </form> > > > </body> > > > </html> > > > > > On Jan 3, 9:58 pm, "Rick Faircloth" <r...@whitestonemedia.com> wrote: > > > > Thanks for the reply, Joe... > > > > > > To answer your question: I want to check the required fields for any > > > > that are still > > > > invalid after a user blurs out of any required field. > > > > > > Rick > > > > > > > -----Original Message----- > > > > > From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] > > > > > On Behalf Of Joe > > > > > Sent: Saturday, January 03, 2009 10:15 PM > > > > > To: jQuery (English) > > > > > Subject: [jQuery] Re: How to check all required fields after each > > > > > field is filled... > > > > > > > > > However, I want to be able to scan all required fields > > > > > > > after each field is filled in and see if any required > > > > > > > fields remain to be satisfactorily completed. > > > > > > > When do you want to "scan"? After the user blurs out of the last > > > > > input? Or blurs out of any required input (because technically the > > > > > user could skip around on the form)? > > > > > > > You obviously can't do it on submit because the button is disabled. > > > > > > > I have an idea of how to do it, but you need to dictate the event > > > > > handler that is going to do trigger the scanning. > > > > > > > Joe > > > > > > >http://www.subprint.com > > > > > > > On Jan 3, 6:17 pm, "Rick Faircloth" <r...@whitestonemedia.com> wrote: > > > > > > Anyone? > > > > > > > > > I'm trying to validate a form. > > > > > > > > > All the validation I've implemented up to this point > > > > > > > is working fine. > > > > > > > > > However, I want to be able to scan all required fields > > > > > > > after each field is filled in and see if any required > > > > > > > fields remain to be satisfactorily completed. If there > > > > > > > are any, I want to keep the submit button on my form > > > > > > > disabled. > > > > > > > > > I'm trying to use this code: > > > > > > > > > $(':input.required').each(function() { > > > > > > > var val = (this.value.length); > > > > > > > if (val == 0) > > > > > > > { $('#submit').attr('disabled', 'disabled'); }; > > > > > > > }); > > > > > > > > > However, each time I fill in a required field, the submit > > > > > > > button is enabled. (I realize for now that the code above > > > > > > > is only checking length and I can add other checks later, > > > > > > > but wanted to get this one working first. > > > > > > > > > Any clues? > > > > > > > > > Thanks, > > > > > > > > > Rick
