1

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

我有一个适合设计的表单，我无法更新 FORM 内的 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"
        }
    }
});

提前致谢！

4

2 回答 2

3
  • 您的最后一条自定义消息缺少左引号".
  • 您的自定义messages应包含参数占位符 ,{0}会自动替换为您的规则的值。
  • 您还使用大写字母拼错了minlength自定义选项中的规则。messagesL

试试这个代码：

$("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')您的问题非常不清楚，但是动态更改消息的方法是使用方法动态更改规则，并且只指定要更改的消息...工作演示：http: //jsfiddle.net/ vkF9r/

* removed *

编辑：

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

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

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

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

更好/推荐：

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

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

以下代码来自我的其他答案...

首先，在所有将显示错误的特定元素上初始化 Tooltipster 插件（使用任何选项） ：form

$(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 的高级选项以及Validate 插件中内置的回调函数success:来errorPlacement:自动显示和隐藏工具提示，如下所示：

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

});
于 2013-02-10T16:16:41.370 回答
1

根据 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/

于 2013-02-12T16:46:13.673 回答