I'm facing an issue with jQuery validation custom error placement. When adding a label with the custom error, it creates unwanted white space at the bottom of each input/select field.
Custom Error Label in jQuery:
<label for="autocomplete" class="text-left p-0 m-0 error text-danger" generated="true"></label>https://i.sstatic.net/UpbxN.jpg
To remove the white space, I used the following CSS:
label.error {
display: none!important;
}However, this solution causes the custom errors not to appear during form validation.
Is there a way to have the custom jQuery errors shown only when they are validated, perhaps by setting display:none as default?
DEMO FIDDLE
I'm open to any CSS3 or JQuery hacks that can help resolve this issue. I've been struggling with this problem for the past few days.
Thank you!
jQuery
jQuery.validator.addMethod('lettersonly', function(value, element) {
return this.optional(element) || /^[a-z," " áãâäàéêëèíîïìóõôöòúûüùçñ]+$/i.test(value);
}, "Please enter letters and spaces only");
$(".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: "Please enter your email address"
},
state: {
required: "Please enter your state"
},
autocomplete: {
required: "Please enter your city",
minlength: "City name too short",
maxlength: "City name too long",
lettersonly: "Only use letters and spaces"
}
}
});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>