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，该功能将display属性设置为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');
},
  ...
});

希望这会有所帮助

自定义jQuery验证错误标签

1 个答案: