java - 将 jquery.validate 与引导弹出框集成

Question

我有一个使用 jquery.validate 插件验证的注册表单。

现在，如果表单无效，我想将验证结果放在引导弹出窗口中，但实际上，我不知道如何做到这一点。

一些帮助？

score 0 · Accepted Answer

jQuery.validate 插件有一个名为errorPlacement.

这需要 2 个参数：

error：验证器在该元素上创建的错误消息。
element : 被验证的元素。

验证器在此处发送错误/有效消息，您可以在那里处理所有放置逻辑。我倾向于做的是.setDefaults在初始化验证器之前把所有这些都放进去。

例子：

jQuery.validator.setDefaults({
   ignore: "",
   errorPlacement: function (error, element){
       // Insert error messgae placement logic here
   }
});

score 0 · Accepted Answer

为了显示和隐藏错误的工具提示，您需要使用errorPlacement和success回调函数。

由于您没有展示您自己的代码，这里有一个使用 Tooltipster 插件的类似设置，只是为了让您了解如何使用这些回调函数。根据需要调整 Bootstrap 弹出框或您可能使用的任何其他工具提示插件。

$(document).ready(function () {

    $('#myform').validate({
            // rules and options here,
            errorPlacement: function (error, element) {
                // construct tooltip with message as per plugin method
                $(element).tooltipster('update', $(error).text());  
                // show tooltip as per plugin method
                $(element).tooltipster('show');
            },
            success: function (label, element) {
                // hide tooltip as per plugin method
                $(element).tooltipster('hide');
            }
    });

});

演示：http: //jsfiddle.net/kyK4G/

参考： https ://stackoverflow.com/a/14741689/594235

文档：http: //jqueryvalidation.org/validate