excluding a class from global error class

i have the jquery code to loop over fields from a list to add the class like this:

var a= data.fields.split(",");
$.each(a,function(i){
    $("#"+a[i]).closest('.form-group').addClass('has-error');   
 });

but now one of the div have a insider div like this:

<div class="input-group-addon">/</div> 

and i am trying the the has-error class should not get applied it to it, but it is covering this up because of the has-error on parent div

1 answer

  • answered 2018-10-11 20:16 Barmar

    Add a style for .has-error .input-group-addon that overrides the style inherited from .has-error, e.g.

    .has-error {
        background-color: red;
    }
    .has-error .input-group-addon {
        background-color: white;
    }
    

    BTW, instead of the .each loop you can create a selector that matches all those IDs.

    var ids = data.fields.split(",").map(id => "#" + id).join(",");
    $(ids).closest('.form-group').not(":has(.input-group-addon)").addClass('has-error');