Нежелательное пространство, вызванное пользовательской меткой ошибки проверки jQuery

Question

Я использую размещение пользовательских ошибок проверки jQuery внутри div в нижней части каждого ввода / выбора, но добавляя метку с пользовательской ошибкой, она создает пробел.

Ошибка пользовательской метки 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');
},
  ...
});

Надеюсь, это поможет