How to highlight jQuery validation
I would be greatly helped as I am a newbie when it comes to jQuery.
I have this code right here:
$(document).ready(function(){
$("#subscribe").validate({
debug: false,
rules: {
email: {
required: true,
email: true
}
},
messages: {
email: "*",
},
submitHandler: function(form) {
$.post('wp-content/themes/abc/process.php', $("#subscribe").serialize(), function(data) {
$('#results').html(data);
});
}
});
});
Now what I'm trying to do is replace the message: *, with highlighting the input field. So instead of showing the message * right after the email input field, I would like to add a class to the email input field. Help would be much appreciated.
+3
source to share
1 answer
As mentioned by victor k and Cory , jQuery validation adds a class .error
to the element being validated if it fails validation rules. It also adds a default message. If you want to delete the post and highlight the input field, you can set the message to an empty string and highlight the input field with CSS. Here's an example:
$(document).ready(function() {
$("#subscribe").validate({
debug: false,
rules: {
email: {
required: true,
email: true
}
},
messages: {
email: "",
},
submitHandler: function(form) {
$.post('wp-content/themes/abc/process.php', $("#subscribe").serialize(), function(data) {
$('#results').html(data);
});
}
});
});
#email.error {
border: 2px solid red;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<form id="subscribe">
<input type="text" id="email" name="email">
</form>
+3
source to share