相关疑难解决方法(0)

我正在尝试使用jQuery Validation Plugin为我的表单添加验证,但是我遇到了一个问题,当我使用输入组时插件会输出错误消息.

$('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/

我正在使用带有jQuery Validate插件的Twitter Bootstrap 3,但出于某种原因,当弹出验证错误消息时,它会拉伸我的输入组 - 插件框和图标.

正常[无验证]

有效率

如果你想解决问题,这就是我的小提琴:我的小提琴

我在网上尝试了多种解决方案,比如

GitHub 在Stack Overflow 上发出输入插件和输入插件问题

但无论我尝试什么,我似乎无法解决问题.

请告诉我如何在出现验证错误时阻止INPUT GROUP-ADDON拉伸.谢谢!

我的主要代码如下:

jQuery的

$('.login-form').validate ({
        // validation rules for registration form
    errorClass: "error-class",
    validClass: "valid-class",  
    onError : function(){
        $('.input-group.error-class').find('.help-block.form-error').each(function() {
          $(this).closest('.form-group').addClass('error-class').append($(this));
        });
    },

        rules: {
            username: {
                required: true,
                minlength: 3,
                maxlength: 40
            },

          password: {
                required: true,
                minlength: 7,
                maxlength: 20
            }
            },

        messages: {
            username: {
                required: "Please enter your username or email address",
                minlength: …