带有 jQ​​uery 验证插件的 Bootstrap [英] Bootstrap with jQuery Validation Plugin

问题描述

我正在尝试使用 jQuery 验证插件向我的表单添加验证，但是我遇到了一个问题，即当我使用输入组时插件会放置错误消息.

I am trying to add validation to my form with jQuery Validation Plugin, but I'm having a problem where the plugin puts the error messages when I'm using input groups.

$('form').validate({
    rules: {
        firstname: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        lastname: {
            minlength: 3,
            maxlength: 15,
            required: true
        }
    },
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    }
});

我的代码: http://jsfiddle.net/hTPY7/4/

推荐答案

为了与 twitter bootstrap 3 完全兼容，我需要覆盖一些插件方法:

for total compatibility with twitter bootstrap 3, I need to override some plugins methods:

// override jquery validate plugin defaults
$.validator.setDefaults({
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

参见示例:http://jsfiddle.net/mapb_1990/hTPY7/7/

这篇关于带有 jQ​​uery 验证插件的 Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！