jQuery validation plugin - not setting focus in Webkit browsers
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.ERRO开发者_如何学JAVAR_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
I've cracked it!
I created a test page in a separate project with a very basic skeleton form. Then I gradually added the scripts and markup from the original page to the test page, checking it in Safari each time. Nothing caused Safari to break until I added the reference to our CSS file, and then it stopped working!
I did a binary-style search through the CSS until I narrowed it down to one line:
input.error { float: left; color: red; vertical-align: top; text-align: left; }
This style is applied by the Validation Plugin to an input field that is in error.
It was the 'float: left' that was breaking Safari and Chrome.
Did some minor alterations to the CSS to get rid of this and now it works! Seems a little odd that a float: left should cause this problem, though....
Ed
加载中,请稍侯......
精彩评论