jQuery Validation plugin - how to change css on error
I am following the demo over here
http://jquery.bassistance.de/validate/demo/marketo/
On submitting the form, if the field is empty, how are the input boxes and other fields getting that red border around them? What is it I have to add in my plugin decleration to get that?
Update
$("#profile_form").validate({
rules: {
nickname: "required",
address: "required"
},
messages: {
nickname: "(required)",
address: " (required)"
}
});
I know how to get the border via css, I need to know how is the validate plugin changing the cs开发者_如何转开发s.
Regards
This is how I accomplished what I was looking for...
$("#profile_form").validate({
rules: {
nickname: "required",
address: "required"
},
messages: {
nickname: "(required)",
address: " (required)"
}, highlight: function(element) {
$(element).addClass('error');
}, unhighlight: function(element) {
$(element).removeClass('error');
}
});
Using the highlight
and unhighlight
options in the jquery.validate plugin does the trick.
Something like this will do it...
CSS
input.error,
select.error,
textarea.error {
border: 3px solid red;
}
In this case, Firebug is your friend.
You would attach a blur()
event handler to the input box. In your callback function, you would check the contents of the input then change the css accordingly using css()
.
Example:
<input type="text" id="myField" />
<script type="text/javascript">
$("#myField).blur(function() {
if ($(this).val() == "") {
$(this).css("borderColor", "red");
}
});
</script>
精彩评论