JQuery form validation with popup alert - alert still showing with valid submission
I am using Jquery validation function for my form validation. So far I have been adding an error message to a page element, but now I want to display it in an alert popup. The alert popup successfully displays an error message when the user has not selected anything, however, the message still appears when they submit a valid form (no error message this time).
How do I disable the popup after a valid form submission?
Here is my js code, I have implemented an alert for radio buttons. You can see this in action at http://hiplogger.hip-zone.co.za/partner/mobile
$("#quickieform").validate({
rules: {
answer: "required"
},
answer: {
answer: "Please make a selection"
},
errorPlacement: function(error, element) {
if ( element.is(":radio") )
alert(error.html());
else if ( element.is(":checkbox") )
error.appendTo( ("#alertbox") );
else
error.appendTo( ("#alertbox") );
},
submitHandler: function(form) {
// do other stuff for a valid form
form.submit();
},
success: function(label) {
// set as text for IE
label.html(" ").addClass("checked");
}
});
source to share
It could be that errorPlacement is triggered regardless of the actual error. This might be the case because a $("#quickieform").valid()
check is done at startup - disables the alert and then returns true
. I have not seen any error message in the warning. You can move this to a function invalidHandler
:
$("#quickieform").validate({
rules: ...
answer: ...
invalidHandler: function(form, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
alert("You have " + error + " errors that need to be fixed");
}
}
...
})
or just change your errorPlacement to check that error.html != ""
if ( element.is(":radio") && error.html != "")
Hope this helps!
source to share
Thanks for your reply. I got it working, but I have no idea why it works. All I did was take out the "success:" section at the end, so my code ended up like this ...
$("#quickieform").validate({
rules: {
answer: "required"
},
invalidHandler: function(form, validator) {
},
errorPlacement: function(error, element) {
if ( element.is(":radio") && error.html != "")
// error.appendTo( ("#alertbox") );
alert(error.html());
else if ( element.is(":checkbox") )
// error.appendTo( ("#alertbox") );
alert(error.html());
else
error.appendTo( ("#alertbox") );
},
submitHandler: function(form) {
form.submit();
}
})
source to share