Question

希望您能帮忙..在地址输入表单的ASP.NET MVC项目中使用http://bassistance.de/jquery-plugins/jquery-plugin-validation/。

我真的试图找出Validation Plugin和webkit浏览器（例如Safari，Chrome）之间，或jQuery和webkit浏览器之间是否存在某种冲突，然后才开始执行寻找错误的任务（尽管我已经浪费了几个小时而无处可去:(）

我们在＆lt; head＆gt;中有一个包含MV的MVC母版页。部分：

$("#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
            }
        }
    }
});

displayErrorMessage（）函数如下所示：

function displayErrorMessage(msg) {
    $("#errorMessage").remove();
    $("#userMessages").append('<div id="errorMessage">' + msg + '</div>');
}

其中#userMessages是页面顶部的div，用于显示错误消息摘要作为横幅。（例如'您的送货地址有问题。请更正以下错误'）

除了webkit浏览器（例如Safari，Chrome）外，所有浏览器都可以正常使用。

在这些浏览器中，验证插件在执行验证后，应将输入焦点设置为页面上的第一个无效字段。它不会在webkit浏览器中执行此操作。例如，在Safari中，正确的字段周围会出现粗蓝框，但光标不会出现在字段中，并且没有焦点。

尝试提交表单失败后 - 说电话号码为空白 - 客户端错误消息按预期显示。当您开始输入电话号码字段时，'onkeyup'代码调用valid（）（重新验证表单并返回true，如果它有效）发现它不再无效（空白），并且应该删除错误消息摘要标题（#userMessages）。

尽管所有浏览器都正确地删除了横幅，但在Safari中，该字段会失去焦点，即使字段上仍然存在粗蓝框。因此，后续的击键丢失，您必须单击回到电话号码字段才能继续。

希望你能帮忙，因为我不知所措！

提前致谢

版

Answer 1

我已经破解了！

我在一个具有非常基本骨架形式的单独项目中创建了一个测试页面。然后我逐渐将脚本和标记从原始页面添加到测试页面，每次都在Safari中检查它。在我添加对CSS文件的引用之前，没有什么能导致Safari中断，然后它就停止了工作！

我通过CSS进行了二元风格的搜索，直到我将其缩小到一行：

input.error { float: left; color: red;  vertical-align: top; text-align: left; }

Validation Plugin将此样式应用于错误的输入字段。

正是'浮动：左'打破了Safari和Chrome。

对CSS进行了一些小改动以摆脱这个现在它的工作原理！看起来有点奇怪浮动：左边应该导致这个问题，但是....

版

jQuery验证插件 - 不在Webkit浏览器中设置焦点

1 个答案: