Hi all,
Hope you can help.. am using http://bassistance.de/jquery-plugins/jquery-plugin-validation/ in an ASP.NET MVC project on an address entry form.
I'm really trying to find out whether there is some kind of conflict between the Validation Plugin and webkit browsers (e.g. Safari, Chrome), or between jQuery and webkit browsers, before I embark on a bug-hunting mission (although I've already wasted several hours and got nowhere :( )
We've got an MVC master page containing, in the <head> section:
$("#deliveryAddressForm, #paymentForm").validate({
showErrors: function(errorMap, errorList) {
if (errorList.length > 0) {
var form = errorList[0].element.form;
if (form.id == "deliveryAddressForm") {
displayErrorMessage("<%= CheckoutController.ERROR_MESSAGE_DELIVERY_ADDRESS %>");
}
else if (form.id == "paymentForm") {
displayErrorMessage("<%= CheckoutController.ERROR_MESSAGE_ORDER %>");
}
$("span.error").remove(); // remove server-side validation error messages
}
this.defaultShowErrors(); // call overridden showErrors
},
onkeyup: function(element) { // on keyup if form now valid remove banner error message
if ($("label.error").length > 0) { // If some client-side errors currently displayed
if ($("#" + element.form.id).valid()) { // validate form, then if no errors remain
$("#errorMessage").remove(); // remove banner error message
}
}
}
});
The displayErrorMessage() function looks like this:
function displayErrorMessage(msg) {
$("#errorMessage").remove();
$("#userMessages").append('<div id="errorMessage">' + msg + '</div>');
}
where #userMessages is a div at the top of the page to display an error message summary as a banner. (e.g. 'There is a problem with your delivery address. Please correct the errors below')
This all works fine in all the browsers, except the webkit browsers (e.g. Safari, Chrome).
In these browsers, the Validation Plugin, after performing validation, should set the input focus to the first invalid field on the page. It doesn't do this in webkit browsers. In Safari, for instance, the thick blue box appears around the correct field, but the cursor does not appear in the field, and it does not have focus.
After a failed attempt to submit the form - say the phone number was blank - the client side error messages appear as expected. When you start typing in, say, the phone number field, the 'onkeyup' code calls valid() (which re-validates the form and returns true if it is valid) finds that it is no longer invalid (blank), and should remove the error message summary banner (#userMessages).
Although all the browsers correctly remove the banner, in Safari the field loses focus, even though the thick blue box remains on the field. So subsequent keystrokes are lost and you have to click back onto the phone number field to continue.
Hope you can help as I'm at a loss!
Thanks in advance
Ed