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

2023-08-27 7695阅读 0评论
首页 » 资源 » 技术 » 正文

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

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

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

解决方法就是通过 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);       }   } });
1
  $.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);        }    }  });

解决后的错误提示截图:


免责声明
1、本网站属于个人的非赢利性网站,转载的文章遵循原作者的版权声明。
2、本网站转载文章仅为传播更多信息之目的,凡在本网站出现的信息,均仅供参考。本网站将尽力确保所
提供信息的准确性及可靠性,但不保证信息的正确性和完整性,且不对因信息的不正确或遗漏导致的任何
损失或损害承担责任。
3、任何透过本网站网页而链接及得到的资讯、产品及服务,本网站概不负责,亦不负任何法律责任。
4、本网站所刊发、转载的文章,其版权均归原作者所有,如其他媒体、网站或个人从本网下载使用,请在
转载有关文章时务必尊重该文章的著作权,保留本网注明的“稿件来源”,并白负版权等法律责任。

手机扫描二维码访问

文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复: 表情:
评论列表 (暂无评论,7695人围观)

还没有评论,来说两句吧...

目录[+]