jQuery Validation验证Bootstrap的输入框组(input-group)时提示信息错位的解决办法

主机之家测评 2019-11-25 19:56 主机之家测评 | 隐藏边栏 | 抢沙发 | 211 0

文章评分 0 次，平均分 0.0 ：

当使用 jQuery Validation 插件验证 Bootstrap 输入框组的时候，提示的错误信息会导致输入框组错位，具体如图：

jQuery Validation 验证 Bootstrap 的输入框组(input-group)时提示信息错位的解决办法

解决方法就是通过 errorPlacement 方法去重新设置错误信息的显示位置，具体代码如下：

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

解决后的错误提示截图：

jQuery Validation 验证 Bootstrap 的输入框组(input-group)时提示信息错位的解决办法