javascript – 带有图标内部的输入字段的Jquery验证发送错误消息

前端之家收集整理的这篇文章主要介绍了javascript – 带有图标内部的输入字段的Jquery验证发送错误消息前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我在输入文本框中使用带有图标的bootstrap.此输入也有验证.在验证之前,所有内容都在页面显示正常.验证后,它变得混乱,如下图所示.你能就此提出建议吗?

在验证之前:

验证后:

HTML代码

Feedback">
                Feedback">Feedback">
                Feedback">Feedback">
                Feedback">Feedback">
                Feedback">Feedback">
                Feedback">Feedback">
                Feedback">

jquery代码

$(document).ready(function() {

  $(".registrationForm").validate(

     {
        rules: {
            name : {
                required : true,minlength : 3
            },surname : {
                required : true,username : {
                required : true,email : {
                required : true,email : true
            },password : {
                required : true,minlength : 5
            },password_again : {
                required : true,minlength : 5,equalTo : "#password"
            }
        },highlight : function(element) {
            $(element).closest('.form-group,.has-Feedback').removeClass('has-success').addClass('has-error');
        },unhighlight : function(element) {
            $(element).closest('.form-group,.has-Feedback').removeClass('has-error').addClass('has-success');
        }
     }
  );

});

谢谢你的帮助.

最佳答案
这是因为您使用的jQuery Validate插件使用< label>默认情况下用于呈现错误消息的标记.
选择将其渲染为< span>标签,它会工作.

$(".registrationForm").validate(
{
   errorElement: "span"
});

这里的文档:
https://jqueryvalidation.org/validate/

这是一个尝试它的jsfiddle:
https://jsfiddle.net/bq0e5f86/

原文链接:https://www.f2er.com/html/425538.html

猜你在找的HTML相关文章