[jQuery] [validate] revalidate dropdown onchange instead of onblur
I've tried several ways, but I can't seem to force the jQuery Validator to (re)validate the dropdown during the onchange. Current scenario of a required dropdown: 1) Do not select an option and submit form. 2) Let validator validate the form. 3) Validator will show errors and higlight invalid fields. 4) Use mouse to open the dropdown and select an option. 5) Validator will only (re)validate the dropdown and remove the error/ highlight when you blur the dropdown! Using keyboard to select options works. The error/highlight get removed immediately when I select a valid option by up/down keys. So it apparently listens on the keyup event, but I'd like to do that for the change event too. Any suggestions (without hacking the jquery.validate.js) ?
[jQuery] Re: revalidate dropdown onchange instead of onblur
BTW, for the case anyone's interested, with hacking jquery.validate.js 1.5.2 the following way I accomplised my wishes: Change line 289 from: $(this.currentForm) .delegate(focusin focusout keyup, :text, :password, :file, select, textarea, delegate) .delegate(click, :radio, :checkbox, delegate); to: $(this.currentForm) .delegate(focusin focusout keyup, :text, :password, :file, textarea, delegate) .delegate(focusin focusout keyup change, select, delegate) .delegate(click, :radio, :checkbox, delegate); Cheers, B On Jun 11, 1:08 pm, BalusC bal...@gmail.com wrote: I've tried several ways, but I can't seem to force the jQuery Validator to (re)validate the dropdown during the onchange. Current scenario of a required dropdown: 1) Do not select an option and submit form. 2) Let validator validate the form. 3) Validator will show errors and higlight invalid fields. 4) Use mouse to open the dropdown and select an option. 5) Validator will only (re)validate the dropdown and remove the error/ highlight when you blur the dropdown! Using keyboard to select options works. The error/highlight get removed immediately when I select a valid option by up/down keys. So it apparently listens on the keyup event, but I'd like to do that for the change event too. Any suggestions (without hacking the jquery.validate.js) ?
[jQuery] [form] handle ajaxSubmit error as normal response instead of ajax response.
The server side (JSP/Servlet in this case) can throw an unexpected
exception (ServletException in this case). The exception is on the
server side handled as an error page, which returns just a complete
HTML page with the exception details. I'd like to let ajaxSubmit's
error option show the entire page. With other words, it must handle it
as synchronous response rather than asynchronous response.
I can't manage to get it to work. I tried under each the following:
[code]
$('#myform').ajaxSubmit({
error: function(xhr) { $(document).html(xhr.responseText); },
success: doSomething
});
[/code]
Unfortunately this displays a blank document, although alert
(xhr.responseText) shows the correct and complete HTML response.
But to my surprise this works:
[code]
$('#myform').ajaxSubmit({
error: nonExistingFunctionName,
success: doSomething
});
[/code]
This works exactly as if it was a synchronous request. This also shows
an error nonExistingFunctionName is not defined in the JS error
console. But the big pitfall is that the success part (and the remnant
of the JS code) won't be executed anymore due to the same error as it
is apparently been interpreted anyway. So if no exception is been
thrown, nothing will happen anymore.
Any insights? How could I show the xhr.responseText as if it was a
synchronous response?
[jQuery] [validate] form with multiple buttons and multiple submit handlers
I've a paged form with back and next buttons on each form.
Each button invokes an ajaxSubmit() using submitHandler.
Next button should display next form using slideUp() and slideDown().
Back button should display previous form using slideUp() and slideDown
().
Here's an example of 2nd form (step) with 2 buttons (back and next).
HTML
[code]
form id=step2form
button type=submit name=action value=back class=backlt;
Back/button
button type=submit name=action value=next class=nextNext
gt;/button
/form
[/code]
jQuery
[code]
$('#step2form button.back').click(function() {
$('#step2form').validate({
submitHandler: function() {
$('#step2form').ajaxSubmit();
$('#step1form').slideDown(500);
$('#step2form').slideUp(500);
}
});
});
$('#step2form button.next').click(function() {
$('#step2form').validate({
submitHandler: function() {
$('#step2form').ajaxSubmit();
$('#step3form').slideDown(500);
$('#step2form').slideUp(500);
}
});
});
[/code]
The code looks the same for other forms.
Bot buttons works fine on the very first submit of the form,
regardless which button was clicked first. But on the subsequent
submits of the same form, the initially used submitHandler seems to be
used instead. I.e. when 'back' was first clicked and later when you
click 'next' on the same form, then the submitHandler set by 'back' is
been used instead (and vice versa).
As far as my knowledge concerns, it look like that the submitHandler
appends the new functions to the form's submit event instead of
overriding/replacing them. This will cause that only the first
functions will be used until it returns false.
Should I see this as a bug or a feature? How can I solve/workaround
this the best way?
[jQuery] [validate] form with multiple buttons and multiple submit handlers
I thought I already have added the [validate] tag to the subject?
Anyway, now it's done again.
On Apr 17, 12:31 pm, BalusC bal...@gmail.com wrote:
I've a paged form with back and next buttons on each form.
Each button invokes an ajaxSubmit() using submitHandler.
Next button should display next form using slideUp() and slideDown().
Back button should display previous form using slideUp() and slideDown
().
Here's an example of 2nd form (step) with 2 buttons (back and next).
HTML
[code]
form id=step2form
button type=submit name=action value=back class=backlt;
Back/button
button type=submit name=action value=next class=nextNext
gt;/button
/form
[/code]
jQuery
[code]
$('#step2form button.back').click(function() {
$('#step2form').validate({
submitHandler: function() {
$('#step2form').ajaxSubmit();
$('#step1form').slideDown(500);
$('#step2form').slideUp(500);
}
});
});
$('#step2form button.next').click(function() {
$('#step2form').validate({
submitHandler: function() {
$('#step2form').ajaxSubmit();
$('#step3form').slideDown(500);
$('#step2form').slideUp(500);
}
});
});
[/code]
The code looks the same for other forms.
Bot buttons works fine on the very first submit of the form,
regardless which button was clicked first. But on the subsequent
submits of the same form, the initially used submitHandler seems to be
used instead. I.e. when 'back' was first clicked and later when you
click 'next' on the same form, then the submitHandler set by 'back' is
been used instead (and vice versa).
As far as my knowledge concerns, it look like that the submitHandler
appends the new functions to the form's submit event instead of
overriding/replacing them. This will cause that only the first
functions will be used until it returns false.
Should I see this as a bug or a feature? How can I solve/workaround
this the best way?
[jQuery] Re: form with multiple buttons and multiple submit handlers
OK, I solved it the following way without using the submit handler:
[code]
$('#step2form button.back').click(function() {
if ($('#step2form').validate().form()) {
$('#step2form').ajaxSubmit();
$('#step1form').slideDown(500);
$('#step2form').slideUp(500);
}
return false;
});
$('#step2form button.next').click(function() {
if ($('#step2form').validate().form()) {
$('#step2form').ajaxSubmit();
$('#step3form').slideDown(500);
$('#step2form').slideUp(500);
}
return false;
});
[/code]
On Apr 17, 1:23 pm, BalusC bal...@gmail.com wrote:
I thought I already have added the [validate] tag to the subject?
Anyway, now it's done again.
On Apr 17, 12:31 pm, BalusC bal...@gmail.com wrote:
I've a paged form with back and next buttons on each form.
Each button invokes an ajaxSubmit() using submitHandler.
Next button should display next form using slideUp() and slideDown().
Back button should display previous form using slideUp() and slideDown
().
Here's an example of 2nd form (step) with 2 buttons (back and next).
HTML
[code]
form id=step2form
button type=submit name=action value=back class=backlt;
Back/button
button type=submit name=action value=next class=nextNext
gt;/button
/form
[/code]
jQuery
[code]
$('#step2form button.back').click(function() {
$('#step2form').validate({
submitHandler: function() {
$('#step2form').ajaxSubmit();
$('#step1form').slideDown(500);
$('#step2form').slideUp(500);
}
});
});
$('#step2form button.next').click(function() {
$('#step2form').validate({
submitHandler: function() {
$('#step2form').ajaxSubmit();
$('#step3form').slideDown(500);
$('#step2form').slideUp(500);
}
});
});
[/code]
The code looks the same for other forms.
Bot buttons works fine on the very first submit of the form,
regardless which button was clicked first. But on the subsequent
submits of the same form, the initially used submitHandler seems to be
used instead. I.e. when 'back' was first clicked and later when you
click 'next' on the same form, then the submitHandler set by 'back' is
been used instead (and vice versa).
As far as my knowledge concerns, it look like that the submitHandler
appends the new functions to the form's submit event instead of
overriding/replacing them. This will cause that only the first
functions will be used until it returns false.
Should I see this as a bug or a feature? How can I solve/workaround
this the best way?
