CODEWITHSUNDEEP
javascriptjqueryhtml
Nida Amin
Nida Amin

Reputation: 755

How to check whether all the other div contains a particular class on input events?

I have html generated dynamically through code and it is rendered in browser like:

        <div class="required">  
        <label class="col-sm-3 control-label text-danger">Contact Details</label>

       <div id="dynamic-contact-details" class="col-sm-4">
         <div id="count0" class="space form-group has-error"><div class="col-sm-4">
        <select id="contact-type0" class="form-control"><option value="">Select</option><option value="Phone">Phone</option><option value="Whatapp">Whatapp</option><option value="Facebook">Facebook</option><option value="Web">Web</option><option value="Fax">Fax</option></select>
      <small id="contact-type0" class="text-danger">Contact Type is Required</small>
     </div>
     <div class="col-sm-7">
          <input type="text" name="contact-type-value0" id="contact-type-value0" class="form-control">
          <small id="contact-type-value0" class="text-danger">Contact Type Value is Required</small>
     </div>
           <button value="count0" class="remove_field btn btn-danger"><i class="fa fa-trash"></i></button>
       </div>
       <div id="count1" class="space form-group has-error"><div class="error">
        <div class="col-sm-4">
         <select id="contact-type1" class="form-control"><option value="">Select</option><option value="Phone">Phone</option><option value="Whatapp">Whatapp</option><option value="Facebook">Facebook</option><option value="Web">Web</option><option value="Fax">Fax</option></select>
       <small id="contact-type1" class="text-danger">Contact Type is Required</small>
       </div><div class="col-sm-7">
         <input type="text" name="contact-type-value1" id="contact-type-value1" class="form-control">
               <small id="contact-type-value1" class="text-danger">Contact Type Value is Required</small>
         </div>
        <button value="count1" class="remove_field btn btn-danger"><i class="fa fa-trash"></i></button>
        </div></div>
      <div id="count2" class="space form-group has-error"><div 
       .... 
      </div>
   </div>
   </div>

Note that that has-error class is appended to the div when the corresponding inputs are kept blank and clicked on save buttons. The has-error classes are removed from the div when the input is filled. Now I want to remove class text-danger from label only when all the div inside dynamic-contact-details does not contain has-error classes.

I have tried below lines of code but it does not work.

     $('#dynamic-contact-details').on('change', ':input', function() {
              $(this).closest(".form-group").removeClass("has-error");
              $(this).next('small').addClass('hide');
              if($(this).find('div.has-error').length == 0)
              {
                $(this).closest(".form-group").parent().parent().find(".control-label").removeClass("text-danger");
              }
          });

Please help me in finding better way to do it.

Upvotes: 1

Views: 66

Answers (2)

gaetanoM
gaetanoM

Reputation: 42054

Now I want to remove class text-danger from label only when all the div inside dynamic-contact-details does not contains has-error classes.

You can simply count how many .has-error classes. If such a value is 0 you can remove:

if ($('#dynamic-contact-details').find('.has-error').length == 0) {
   $('#dynamic-contact-details').find(".control-label").removeClass("text-danger");
}

Upvotes: 1

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

You need to check the length for the has-error class inside the element that has id as dynamic-contact-details so you need to change the if condition something like this:

$('#dynamic-contact-details').on('change', ':input', function() {
    $(this).closest(".form-group").removeClass("has-error");
    $(this).next('small').addClass('hide');
    if($('#dynamic-contact-details').find('.has-error').length == 0)
    {
      $(this).closest(".form-group").parent().parent().find(".control-label").removeClass("text-danger");
    }
});

Upvotes: 1

Related Questions