[jQuery] Re: Validation madness
Nope, that wasn't included. I see the point though. Does it make more sense to run that before displaying error messages, or afterwards? How to name it? beforeErrorDisplay? afterValidation? beforeFailure? Either before or after would be fine I think. The reason is that you might want to do something additional to let the user know that some errors occurred. Sometimes an error label and focusing the field isn't enough to grab the user's attention. In my case, I trigger an alert('One or more errors occurred, please adjust the indicated fields'), which forces the user to acknowledge that an error occurred. As far as naming...maybe onError or something like that? I also like renaming errorPlacement to errorHandler, since you can do much more than just the placement there. -- Josh
[jQuery] Re: Validation madness
Josh Nathanson schrieb: - onsubmit: Boolean, default true - validate on form submit (similar to onkeyup/onblur) - beforeValidation: Callback, called before doing any validation - beforeSubmit: Callback, called before submitting the form (default submit or calling submitHandler, if specified) I'm not sure yet if beforeValidation should be called only for the entire form or also when validating a single element. Opinions? That all sounds good, and just want to add my vote for "onValidationFailure" to be run if the validation fails on the submit action (in other words form() == false). Or, is this covered in your new callbacks and I'm not quite following? Nope, that wasn't included. I see the point though. Does it make more sense to run that before displaying error messages, or afterwards? How to name it? beforeErrorDisplay? afterValidation? beforeFailure? I'd like to stick with jQuery's naming conventions: $.ajax provides beforeSend (would be beforeValidation), success (beforeSubmit?), error (onValidationFailure?) I may also need to rename the option "errorPlacement". It should be errorHandler: Like submitHandler, if specified, it replaces built-in funcitonality. In contrast to the beforeWhatever callbacks, which are just called but have no effect on the validation lifecycle. Does that make sense? What would you prefer? beforeValidation, success and error? Or beforeValidation, beforeSubmit, afterError? Other suggestions? -- Jörn
[jQuery] Re: Validation madness
- onsubmit: Boolean, default true - validate on form submit (similar to onkeyup/onblur) - beforeValidation: Callback, called before doing any validation - beforeSubmit: Callback, called before submitting the form (default submit or calling submitHandler, if specified) I'm not sure yet if beforeValidation should be called only for the entire form or also when validating a single element. Opinions? That all sounds good, and just want to add my vote for "onValidationFailure" to be run if the validation fails on the submit action (in other words form() == false). Or, is this covered in your new callbacks and I'm not quite following? -- Josh
[jQuery] Re: Validation madness
Steve Blades schrieb: Whoops! One last thing. An 'onValidationFailure' type of method, allowing someone to run some scripting should the validation fail (like resetting data changes one might have made in the beforeSubmit call). You may even want to split things further, with a 'beforeValidation' (occurring prior to validation) separate from a 'beforeSubmit' (occurring after validation, and prior to the form submit). Just a thought. Currently my plan is to add the following options: - onsubmit: Boolean, default true - validate on form submit (similar to onkeyup/onblur) - beforeValidation: Callback, called before doing any validation - beforeSubmit: Callback, called before submitting the form (default submit or calling submitHandler, if specified) I'm not sure yet if beforeValidation should be called only for the entire form or also when validating a single element. Opinions? -- Jörn
[jQuery] Re: Validation madness
Whoops! One last thing. An 'onValidationFailure' type of method, allowing someone to run some scripting should the validation fail (like resetting data changes one might have made in the beforeSubmit call). You may even want to split things further, with a 'beforeValidation' (occurring prior to validation) separate from a 'beforeSubmit' (occurring after validation, and prior to the form submit). Just a thought. On 10/9/07, Steve Blades <[EMAIL PROTECTED]> wrote: > > > How about these? > > - beforeSubmit: called before the validation starts > > - success: called when the form is valid > > - submitHandler: replaces the default submit, handler must do an > > ajaxSubmit or whatever > > Sounds outstanding, as long as the submitHandler only covered an > ajaxSubmit. If it was an all out replacement for the default submit handler > then there wouldn't really be a need for the other two options, as all of it > could be rolled into someone's new 'submit' function, rolling the > $(form).submit() within their own handler. I guess it's just a question of > implementation and documentation. > > Thanks again for the excellent work you do with JQuery. > > -- > Steve "Cutter" Blades > Adobe Certified Professional > Advanced Macromedia ColdFusion MX 7 Developer > _ > http://blog.cutterscrossing.com > --- > The Past is a Memory > The Future a Dream > But Today is a Gift > That's why they call it > The Present > -- Steve "Cutter" Blades Adobe Certified Professional Advanced Macromedia ColdFusion MX 7 Developer _ http://blog.cutterscrossing.com --- The Past is a Memory The Future a Dream But Today is a Gift That's why they call it The Present
[jQuery] Re: Validation madness
> How about these? > - beforeSubmit: called before the validation starts > - success: called when the form is valid > - submitHandler: replaces the default submit, handler must do an > ajaxSubmit or whatever Sounds outstanding, as long as the submitHandler only covered an ajaxSubmit. If it was an all out replacement for the default submit handler then there wouldn't really be a need for the other two options, as all of it could be rolled into someone's new 'submit' function, rolling the $(form).submit() within their own handler. I guess it's just a question of implementation and documentation. Thanks again for the excellent work you do with JQuery. -- Steve "Cutter" Blades Adobe Certified Professional Advanced Macromedia ColdFusion MX 7 Developer _ http://blog.cutterscrossing.com --- The Past is a Memory The Future a Dream But Today is a Gift That's why they call it The Present
[jQuery] Re: Validation madness
Steve Blades schrieb: Ok, I've kind of hacked around it. Maybe adding prePost and onFailure options that can map to functions(form), so that you could run a script prior to the actual submit event, or something in the event of the form being invalid. How about these? - beforeSubmit: called before the validation starts - success: called when the form is valid - submitHandler: replaces the default submit, handler must do an ajaxSubmit or whatever -- Jörn
[jQuery] Re: Validation madness
Ok, I've kind of hacked around it. Maybe adding prePost and onFailure options that can map to functions(form), so that you could run a script prior to the actual submit event, or something in the event of the form being invalid. I had a select with values that were a pipe delimited string. The select had an onChange event handler that would pass the first token to an ajax call to populate a second drop down. When the form was submitted I would have to strip out the first (id) token of the value so that only the second token (value) would be submitted. If the validation failed then I would need to repopulate the first select with the correct data (remember I had stripped out that id token), and zero out the second select (since it wouldn't be related anymore). It's all working now, but kinda clunky. -- Steve "Cutter" Blades Adobe Certified Professional Advanced Macromedia ColdFusion MX 7 Developer _ http://blog.cutterscrossing.com --- The Past is a Memory The Future a Dream But Today is a Gift That's why they call it The Present
[jQuery] Re: Validation madness
Jörn, That would be outstanding. My problem now is, I need this 'stuff' in the submit. By placing .validate() in the submit I'm able to do both, but. (see script first): $('#CSForm').submit(function(){ var selField = $('select#Make', this); rewriteMakeOption(selField); var errContainer = $('#CSForm div.error'); var v = $(this).validate({ errorContainer: errContainer, errorLabelContainer: $("ol",errContainer), rules: { First_Name: "required", Last_Name: "required", EMail: { required: true, email: true }, Make: "required", Model: "required" }, messages: { First_Name: "Please enter your First Name", Last_Name: "Please enter your Last Name", EMail: "Please enter a valid email address", Make: "Please select a make", Model: "Please select a model" }, wrapper: 'li' }); if(v.form()){ return true; } else return false; }); So, I am running a method that rewrites the 'value' of the selected option in a select. This also removes all of the other options in the process (since they shouldn't be needed, right?) But, if the validation fails I've already rewritten the select, so nothing is available any longer. Itchy, huh? -- Steve "Cutter" Blades Adobe Certified Professional Advanced Macromedia ColdFusion MX 7 Developer _ http://blog.cutterscrossing.com --- The Past is a Memory The Future a Dream But Today is a Gift That's why they call it The Present
[jQuery] Re: Validation madness
Josh Nathanson schrieb: Steve, odd that I was just helping another poster named Fabien with this yesterday. Here's the way: $("#myform").submit(function() { // do your extra form stuff here var v = $(this).validate(validateOptionsHere); if (v.form()) // runs form validation and returns true if successful this.submit(); // form will be submitted else alert('Error on form validation!') return false; }); The ugly part: The event handlers from the validation plugin are now added each time the form is submitted, not an ideal solution. So far I assumed that anyone using the submitHandler callback would submit the form via ajax. Obviously that isn't true. I'll try to find a better solution for that. -- Jörn
[jQuery] Re: Validation madness
That's funny, I was just plowing through a filtered list of the jquery list emails, trying to figure it all out. Thanks for the assist Josh, knew it should be something simple. -- Steve "Cutter" Blades Adobe Certified Professional Advanced Macromedia ColdFusion MX 7 Developer _ http://blog.cutterscrossing.com --- The Past is a Memory The Future a Dream But Today is a Gift That's why they call it The Present
[jQuery] Re: Validation madness
Steve, odd that I was just helping another poster named Fabien with this yesterday. Here's the way: $("#myform").submit(function() { // do your extra form stuff here var v = $(this).validate(validateOptionsHere); if (v.form()) // runs form validation and returns true if successful this.submit(); // form will be submitted else alert('Error on form validation!') return false; }); - Original Message - From: Steve Blades To: jquery-en@googlegroups.com Sent: Thursday, October 04, 2007 12:14 PM Subject: [jQuery] Re: Validation madness ahhh, so the submit handler will run...when? I have some things I need to do with some of these fields prior to the actual form submission. On 10/4/07, Josh Nathanson <[EMAIL PROTECTED]> wrote: Steve, you have an infinite loop, because your submitHandler is re-submitting the form, which then calls the validate handler, which then runs submitHandler and so on. The validation plugin will automatically submit the form if no errors are found, so you don't need to have a separate submitHandler function to submit the form. -- Josh - Original Message - From: Steve Blades To: jquery-en@googlegroups.com Sent: Thursday, October 04, 2007 11:59 AM Subject: [jQuery] Validation madness I'm using the validator plugin, and I have some code like this: var errContainer = $('#CSForm div.error'); $('form#CSForm').validate({ errorContainer: errContainer, errorLabelContainer: $("ol",errContainer), rules: { First_Name: "required", Last_Name: "required", EMail: { required: true, email: true }, Make: "required", Model: "required" }, messages: { First_Name: "Please enter your First Name", Last_Name: "Please enter your Last Name", EMail: "Please enter a valid email address", Make: "Please select a make", Model: "Please select a model" }, wrapper: 'li', submitHandler: rewriteMakeOption }) function rewriteMakeOption(form){ // some other stuff $(form).submit(); } Trying to figure out what I'm doing wrong. I put some console logging into place, only to see that the form was submitted 222 times before it was stopped by Firefox (it killed IE completely). Anybody? -- Steve "Cutter" Blades Adobe Certified Professional Advanced Macromedia ColdFusion MX 7 Developer _ http://blog.cutterscrossing.com --- The Past is a Memory The Future a Dream But Today is a Gift That's why they call it The Present -- Steve "Cutter" Blades Adobe Certified Professional Advanced Macromedia ColdFusion MX 7 Developer _ http://blog.cutterscrossing.com --- The Past is a Memory The Future a Dream But Today is a Gift That's why they call it The Present
[jQuery] Re: Validation madness
ahhh, so the submit handler will run...when? I have some things I need to do with some of these fields prior to the actual form submission. On 10/4/07, Josh Nathanson <[EMAIL PROTECTED]> wrote: > > Steve, you have an infinite loop, because your submitHandler is > re-submitting the form, which then calls the validate handler, which then > runs submitHandler and so on. > > The validation plugin will automatically submit the form if no errors are > found, so you don't need to have a separate submitHandler function to submit > the form. > > -- Josh > > > > > > - Original Message - > > *From:* Steve Blades <[EMAIL PROTECTED]> > *To:* jquery-en@googlegroups.com > *Sent:* Thursday, October 04, 2007 11:59 AM > *Subject:* [jQuery] Validation madness > > I'm using the validator plugin, and I have some code like this: > > var errContainer = $('#CSForm div.error'); > $('form#CSForm').validate({ > errorContainer: errContainer, > errorLabelContainer: $("ol",errContainer), > rules: { > First_Name: "required", > Last_Name: "required", > EMail: { > required: true, > email: true > }, > Make: "required", > Model: "required" > }, > messages: { > First_Name: "Please enter your First Name", > Last_Name: "Please enter your Last Name", > EMail: "Please enter a valid email address", > Make: "Please select a make", > Model: "Please select a model" > }, > wrapper: 'li', > submitHandler: rewriteMakeOption > }) > > > > function rewriteMakeOption(form){ > // some other stuff > $(form).submit(); > } > > Trying to figure out what I'm doing wrong. I put some console logging into > place, only to see that the form was submitted 222 times before it was > stopped by Firefox (it killed IE completely). Anybody? > -- > Steve "Cutter" Blades > Adobe Certified Professional > Advanced Macromedia ColdFusion MX 7 Developer > _ > http://blog.cutterscrossing.com > --- > The Past is a Memory > The Future a Dream > But Today is a Gift > That's why they call it > The Present > > -- Steve "Cutter" Blades Adobe Certified Professional Advanced Macromedia ColdFusion MX 7 Developer _ http://blog.cutterscrossing.com --- The Past is a Memory The Future a Dream But Today is a Gift That's why they call it The Present
[jQuery] Re: Validation madness
Steve, you have an infinite loop, because your submitHandler is re-submitting the form, which then calls the validate handler, which then runs submitHandler and so on. The validation plugin will automatically submit the form if no errors are found, so you don't need to have a separate submitHandler function to submit the form. -- Josh - Original Message - From: Steve Blades To: jquery-en@googlegroups.com Sent: Thursday, October 04, 2007 11:59 AM Subject: [jQuery] Validation madness I'm using the validator plugin, and I have some code like this: var errContainer = $('#CSForm div.error'); $('form#CSForm').validate({ errorContainer: errContainer, errorLabelContainer: $("ol",errContainer), rules: { First_Name: "required", Last_Name: "required", EMail: { required: true, email: true }, Make: "required", Model: "required" }, messages: { First_Name: "Please enter your First Name", Last_Name: "Please enter your Last Name", EMail: "Please enter a valid email address", Make: "Please select a make", Model: "Please select a model" }, wrapper: 'li', submitHandler: rewriteMakeOption }) function rewriteMakeOption(form){ // some other stuff $(form).submit(); } Trying to figure out what I'm doing wrong. I put some console logging into place, only to see that the form was submitted 222 times before it was stopped by Firefox (it killed IE completely). Anybody? -- Steve "Cutter" Blades Adobe Certified Professional Advanced Macromedia ColdFusion MX 7 Developer _ http://blog.cutterscrossing.com --- The Past is a Memory The Future a Dream But Today is a Gift That's why they call it The Present