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

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

自定义jQuery标签错误：

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

是否有人知道如何使自定义jQuery错误仅在经过验证时显示，可能会显示：默认为无

我对任何CSS3或JQuery黑客都持开放态度，因为在过去的几天里，我一直在努力解决这个问题

谢谢

jQuery

HTML

---

我不确定我是否理解这个问题，也不确定这是否有效，但你可以试试

将invalidHandler添加到将display属性设置为block的validate函数。然后将默认值设置为“无”。例如：

标签错误{ 显示：无； }

---

希望这有帮助

是的，这很有效！谢谢你的解决方案。我在考虑使用if-else的更复杂的解决方案，但我没有专业知识来解决这个问题。干杯

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

label.error {
   display: none!important;
}

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

    });

        <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>         

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