自定义 jQuery 验证错误标签导致的不需要的空间

Question

我在每个输入/选择底部的 div 内使用 jQuery 验证自定义错误放置，但是通过添加带有自定义错误的标签，它创建了一个空白。

自定义 jQuery 标签错误：

<label for="autocomplete" class="text-left p-0 m-0 error text-danger" generated="true"></label> 

我可以用 CSS:

让空白消失

label.error {
   display: none!important;
}

但是在验证表单时不会出现自定义错误。

有谁知道如何让自定义 jQuery 错误仅在经过验证时出现，可能默认显示：无？

DEMO FIDDLE

我对任何可以使这项工作有效的 CSS3 或 JQuery Hacks 持开放态度，过去几天我一直在努力解决这个问题。

谢谢！

jQuery

jQuery.validator.addMethod('lettersonly', function(value, element) {
    return this.optional(element) || /^[a-z," " áãâäàéêëèíîïìóõôöòúûüùçñ]+$/i.test(value);
}, "Letters and spaces only please");

$(".signupForm1").validate ({
errorPlacement: function(error, element) {
    return false;
}, 

    rules: {
            autocomplete:{
           required: true,
                minlength: 3,
                maxlength: 30,
                lettersonly: true
           },

           state:{
           required: true},

        email2: {email:true, required:true}
      },

        messages: {
            email2: {
                required: "Enter your email address",
                },   
                  state: {
                required: "Enter your state"},
            autocomplete: {
                required: "Enter your city",
                minlength: "Too short for a city name",
                maxlength: "Too long for a city name",
                lettersonly: "Only use letters and spaces"

                }, 

                highlight: function(element, errorClass) {
        $(element).removeClass(errorClass);
    }    
        }

    });

HTML

        <form id="signupform" class="mt-4 p-sm-3 p-2 signupForm1 input-group mb-sm-3 rounded" method="post" action="#">

    <div class=" form-row w-100">

    <div class="input-group col-sm-8 col-12 w-100 ">
       <label style="" class=" w-100">
      <input type="text" name="autocomplete" id="autocomplete" class="lightfield form-control sentence rounded" placeholder="City"/> <div style=""class="ml-1">  <label for="autocomplete" class="text-left p-0 m-0 error text-danger" generated="true"></label>      </div>

     </label>
    </div>



           <div class="input-group w-100 col-sm-4 col-12 px-1"> 
            <label class=" w-100">

      <select id="inputState" name="state" class="state lightfield form-control sentence rounded">
        <option value="" selected>State</option>
                <option value="AK">Alaska</option>
            <option value="AL">Alabama</option>
            <option value="AR">Arkansas</option>
      </select>

<div style=""class="ml-1">  <label for="inputState" class="text-left p-0 m-0 error text-danger" generated="true"></label>      </div>



     </label>
    </div>

               <div class="input-group w-100 px-1"> 
            <label class=" w-100">
                <label for="email2" class="sr-only">Enter your email address</label>
                <input style ="" id="email2" type="email" name="email2" class="rounded anchor sentence form-control" aria-label="Large" placeholder="Email Address"/>        
                <div style="" class="ml-1">  <label for="email2" class="p-0 m-0 error text-danger" generated="true"></label>  
                </div>
        </label>



<button style="" id="enter" name="signup" type="submit" class="bg-success rounded text-uppercase font-weight-bold w-100 mb-2 ctabutton sentence text-white btn btn-secondary btn-lg">Sign up</button>   


       </div>


          </div>

        </form>         

Answer 1

不确定我是否理解这个问题，也不确定这是否可行，但您可以尝试一下。

将invalidHandler 添加到将显示属性设置为block 的验证函数。然后将默认设置为none。例如：

label.error {
   display: none;
}

$(".signupForm1").validate ({
errorPlacement: function(error, element) {
    return false;
}, 
invalidHandler: function(event, validator) {
    $(document).find('label.error').css('display', 'block !important');
},
  ...
});

希望对你有帮助