javascript - Unhighlighting input group -

i have input form i'm performing client-sided validation on jquery validator plugin. basic usage working great, except specific scenario:

the form splits address input fields, allowing separate fields street number, name, city, state, , zip. address optional input form (a user may opt enter no address), want ensure if 1 of these fields used, user prompted enter fields.

this works, except in case when enters in address , hits submit, , decides enter in no address. ideal behavior in case that, text in inputs they've entered removed, address group unhighlighted.

here current scenario:

1. user enters information 1 input field, e.g., street name.
2. the submit button clicked.
3. the validator plugin highlights other address inputs error message prompting full address.
4. user decides enter no address, , removes prior input, e.g. erases street name
5. ideally: other highlighted address inputs unhighlighted , error message removed. actually: highlighted address inputs , message remain until form submission.

here javascript demonstrates problem , corresponding jsfiddle.

$("form").validate({     errorclass: 'error',     errorelement: 'label',     submithandler: function() {         alert("form submitted");         return false;     },     groups: {         address: "streetnumber streetname city state zipcode"     },     rules: {         streetnumber: {             required: {                 depends: function(){                     return $("#streetname").val() != '' || $("#city").val() != '' || $("#state").val() != '' || $("#zipcode").val() != '';                 }             }         },         streetname: {             required: {                 depends: function(){                     return $("#streetnumber").val() != '' || $("#city").val() != '' || $("#state").val() != '' || $("#zipcode").val() != '';                 }             }         },         city: {             required: {                 depends: function(){                     return $("#streetnumber").val() != '' || $("#streetname").val() != '' || $("#state").val() != '' || $("#zipcode").val() != '';                 }             }         },         state: {             required: {                 depends: function(){                     return $("#streetnumber").val() != '' || $("#streetname").val() != '' || $("#city").val() != '' || $("#zipcode").val() != '';                 }             }         },         zipcode: {             required: {                 depends: function(){                     return $("#streetnumber").val() != '' || $("#streetname").val() != '' || $("#city").val() != '' || $("#state").val() != '';                 }             }         }     },     messages: {         streetnumber: {required: "must provide full address"},         streetname: {required: "must provide full address"},         city: {required: "must provide full address"},         state: {required: "must provide full address"},         zipcode: {required: "must provide full address"}     },     highlight: function(element, errorclass, validclass) {         $(element).addclass(errorclass).removeclass(validclass);     },     unhighlight: function(element, errorclass, validclass) {         $(element).removeclass(errorclass);     },     errorplacement: function(error, element) {         var n = element.attr("name");         if (n == "streetnumber" || n == "streetname" || n == "city" || n == "state" || n == "zipcode")                 error.insertafter("#zipcode");     } }); 

besides trying desired functionality of highlight, i'm wondering if there smarter way accomplish "all or nothing" input groups doesn't involve mess of conditional statements. perhaps can use form input group?

you need add function on focus event, when user leaves field, form fields update.

it's difficult because using plugin, calls happening inside think work:

var inputs = $('form').find('input'); inputs.focus(function () {     inputs.each(function () {        $(this).removeclass('error');     }); }); 

just stick in code outside of validate initialiser.

it better if defined errorcode variable outside of validator , used var in both functions, this:

var errorclass = 'error'; $('form').validate({     errorclass: errorclass, ... ... });  var inputs = $('form').find('input'); inputs.focus(function () { inputs.each(function () {     $(this).removeclass(errorclass); }); });