Question

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

现在，如果表单无效，我想将validate的结果放在bootstrap popover中，但实际上，我不知道如何才能做到这一点。

一些帮助？

Answer 1

jQuery.validate插件有一个名为errorPlacement的方法。

这需要2个参数：

错误：验证程序在该元素上创建的错误消息。
元素：正在验证的元素。

Validator在此处发送错误/有效消息，您可以处理其中的所有放置逻辑。我倾向于在初始化验证器之前将所有内容放在.setDefaults中。

示例：

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

Answer 2

要显示和隐藏错误的工具提示，您需要使用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');
            }
    });

});

DEMO：http://jsfiddle.net/kyK4G/

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

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

Answer 3

结帐：https://github.com/mingliangfeng/jquery.validate.bootstrap.popover

它是一个集成了jQuery验证和bootstrap popover的插件，你可能会在那里得到一些想法。

将jquery.validate与bootstrap popover集成

3 个答案: