Question

我正在遇到这种情况。

我有一个适合设计的表单，我无法在FORM中更新de DOM以显示验证消息。

所以，我想知道如何使用默认浏览器警报替换自定义jQuery Validation Plugin DOM消息，假设以下代码为例。

$("form").validate({
    rules:{
        myName:{
            required: true, minlength: 2
        },
        myEmail:{
            required: true, email: true
        },
        myMessage:{
            required: true, minlength: 10
        }
    },
    messages:{
        myName:{
            required: "Type you name",
            minLength: "Your name must be at least 2 characters long"
        },
        myEmail:{
            required: "Type you e-mail address",
            email: "Type a valid e-mail address"
        },
        myMessage:{
            required: "Type your message",
            minLength: Your message must be at least 2 characters long"
        }
    }
});

提前致谢！

Answer 1

您的上一条自定义消息错过了开头的引号"。
您的自定义messages应包含参数占位符{0}，这些占位符会自动替换为您的规则值。
您还使用大写minlength拼错了自定义messages选项中的L规则。

请尝试使用此代码：

$("form").validate({
    rules:{
        myName:{
            required: true,
            minlength: 2
        },
        myEmail:{
            required: true,
            email: true
        },
        myMessage:{
            required: true,
            minlength: 10
        }
    },
    messages:{
        myName:{
            required: "Type your name",
            minlength: "Your name must be at least {0} characters long"
        },
        myEmail:{
            required: "Type your e-mail address",
            email: "Type a valid e-mail address"
        },
        myMessage:{
            required: "Type your message",
            minlength: "Your message must be at least {0} characters long"
        }
    }
});

演示：http://jsfiddle.net/3JTNh/

引用OP ：“我想知道如何使用默认浏览器警报替换自定义jQuery Validation Plugin DOM消息”

~~您的问题非常明确，但动态更改消息的方法是使用rules('add') method动态更改规则，并仅指定要更改的消息...演示：http://jsfiddle.net/vkF9r/~~

* removed *

修改：

根据评论，OP最初要求使用alert()这样的errorPlacement回调函数来完成JavaScript error。由于error.text()是一个对象，因此您只能使用onkeyup: false, errorPlacement: function (error, element) { alert(error.text()); },来使用其消息。

onkeyup

我建议将false设置为alert()，以便在每次按键时取消重复警报。 如果您使用的是Safari，请不要尝试此演示，否则您将陷入无限循环（在这种情况下使用alert()的一个缺点）http://jsfiddle.net/kxwYd/

BTW：我不建议在任何网站设计中使用过时的JavaScript form。

<强>更好的/推荐的：

要获得更现代的用户体验，您应该将其与jQuery模式或工具提示插件（如Tooltipster）集成。

工作示例：http://jsfiddle.net/SfanE/

以下代码来自my other answer here ...

首先，在显示错误的所有特定$(document).ready(function () { // initialize tooltipster on form input elements $('#myform input[type="text"]').tooltipster({ trigger: 'custom', // default is 'hover' which is no good here onlyOne: false, // allow multiple tips to be open at a time position: 'right' // display the tips to the right of the element }); });元素上初始化Tooltipster插件（with any options）：

$(document).ready(function () { // initialize validate plugin on the form $('#myform').validate({ // any other options & rules, errorPlacement: function (error, element) { $(element).data('tooltipsterContent', $(error).text()); $(element).data('plugin_tooltipster').showTooltip(); }, success: function (label, element) { $(element).data('plugin_tooltipster').hideTooltip(); } }); });

其次，使用Tooltipster's advanced options和success: and errorPlacement: callback functions built into the Validate plugin自动显示和隐藏工具提示，如下所示：

{{1}}

Answer 2

建立Sparky建议的内容，如果你不想包含工具提示插件，你可以使用jQuery UI和一些CSS非常接近地模拟这种行为。

CSS：

label.error {
    background-color:white;
    color:red;
    position:absolute;
    border: 1px black solid;
    padding: 10px;
    box-shadow: 5px 5px 2px #888;
    z-index:1;
}

jQuery的：

$('#myform').validate({
    errorPlacement: function (error, element) {
        error.insertAfter(element).position({
            my: 'left center',
            at: 'right center',
            of: element,
            offset: '5 0'
        });

    },
   //the rest of your validate options
});

此处示例：http://jsfiddle.net/SfanE/1/

如何使用默认浏览器警报覆盖jQuery Validation Plugin消息

2 个答案: