如何使用默认浏览器警报覆盖 jQuery 验证插件消息

Question

我在这里遇到了一个情况。

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

所以，我想知道如何使用默认浏览器警报替换自定义 jQuery 验证插件 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}，它们会自动替换为您的规则值。
• 您还在自定义 messages 选项中使用大写字母 L 拼错了 minlength 规则。

试试这个代码：

$("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 验证插件 DOM 消息”

您的问题非常不清楚，但是动态更改消息的方法是使用rules('add') method 动态更改您的规则，并且只指定要更改的消息...工作演示： http://jsfiddle.net/vkF9r/

* removed *

---

编辑：

根据 cmets，OP 最初要求 JavaScript alert()，这可以使用像这样的 errorPlacement 回调函数来完成。由于error 是一个对象，因此您使用error.text() 仅使用它的消息。

    onkeyup: false,
    errorPlacement: function (error, element) {
        alert(error.text());
    },

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

顺便说一句：我不建议在任何网站设计中使用过时的 JavaScript alert()。

---

更好/推荐：

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

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

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

首先，在将显示错误的所有特定form元素上初始化Tooltipster插件（with any options）：

$(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's advanced options和success: and errorPlacement: callback functions built into the Validate plugin自动显示和隐藏工具提示如下：

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

});

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/