jQuery Validation Plugin with styled textboxes
I have a textexbox that is in the middle of the a three-row, three column table. The "outer" table cells are used to add some decoration to the textbox. When the data entered into the texbox is invalid, t开发者_如何学编程he color of the textbox changes, as do the surrounding images. Here's where my problem lies. On the login page there is the username texbox, and password textbox. If I hit submit with neither of them filled out the color of the texbox changes as do the images to show the field is required. My problem is, how do I get them to change back to normal when the user enters some text? I could write my own javascript to handle this, but I'm trying to use jQuery to validate, like the rest of the application. Any ideas?
Here is what I have working right now:
$.APP.login = $("#logOnDiv > form").validate({
errorPlacement: function (error, element) {
element.parents('table').removeClass('input-table');
element.parents('table').addClass('invalid-input-table');
},
errorClass: "invalid-decorated-input"
});
Listen to an event on the text box itself like keypress
. Assuming that each text box has a class called isValidated
...
$('.isValidated').keypress(function() {
if($(this).val().length) { //we have text now
$(this).parents('table.invalid-input-table').removeClass('invalid-input-table');
//put any other code to remove other html elements (like the images here)
//traversal would be from the text box, so you could do things like $(this).siblings('img').remove(), etc.
}
});
There are more efficient ways to do this by using live
events and adding the invalid classes to the text boxes themselves, but this should be enough unless you're talking about a very large number of fields.
精彩评论