CODEWITHSUNDEEP
javascriptjquery
Kalpit
Kalpit

Reputation: 4936

How to perform validation in multiple groups of inputs according to condition

I am creating a set of textboxes dynamically while pressing (+) button, by cloning the following HTML template: 

<div id= "other_leaders" class="controls form-input">
  <input type="text" name="other_leader_fname[]" class="input_bottom other_leader_fname" id="other_leader_fname" placeholder="First Name" value="'.$val[0].'" />
  <input type="text" name="other_leader_lname[]" class="input_bottom other_leader_lname" id="other_leader_lname"  placeholder="Last Name" value="'.$val[1].'" />
  <input type="text" name="other_leader_email[]" class="other_leader_email" id="other_leader_email" placeholder="Email Address" value="'.$val[2].'" />
  <input type="text" name="other_leader_org[]" class="other_leader_org" id="other_leader_org" placeholder="Organisation/College" value="'.$val[3].'" />
  <span  class="remove btn"><i class="icon-minus"></i></span>      
</div>

I am able to do single textbox validation by following code:

  $("input[name*='other_leader_fname']").each(function(){
            if($(this).val()=="" || !RegExpression.test($(this).val()))
            {
                $(this).addClass('custom-error')
                fnameflag = 0;                    
           }
   });

Now my question is how to do empty validation for all four textboxes, if any one textbox field is filled by the user in that particular textbox group.

for example: if i enter values in the <div> with id other_leader_fname, then it should perform empty validation for other three textboxes of this particular group.

how can i do it?

Upvotes: 2

Views: 94

Answers (3)

T J
T J

Reputation: 43156

You can iterate over the .controls using the each() and check for filled inputs in each group using filter for performing the validation as follows:

$('.controls').each(function(){

  var $inputs = $(this).find('input');
  var filled = $inputs.filter(function(){
    return this.value != "";
  });
  if(filled.length){
     $inputs.each(function(){
        if($(this).val()=="" || !RegExpression.test($(this).val()))
        {
          $(this).addClass('custom-error')
          fnameflag = 0;
        }
      })
   }
});

Demo

side note: since the above is a template for dynamically generated content, You should remove the id and use class instead since id should be unique in a document.

Upvotes: 0

Jai
Jai

Reputation: 74738

As you have just one element so there is no need to have a loop over it:

var $othLeader = $("input[name*='other_leader_fname']");
if($othLeader.val()=="" || !RegExpression.test($othLeader.val())){
    $(this).addClass('custom-error');
    fnameflag = 0;
}

And if you have form then you can validate this in your form's submit function.

Upvotes: 0

Rajesh Dhiman
Rajesh Dhiman

Reputation: 1896

Try this , You can apply your validation rules to all the text box in the div by using following code: 

$("#other_leaders :input[type='text']").each(function(){
                if($(this).val()=="" || !RegExpression.test($(this).val()))
                {
                    $(this).addClass('custom-error')
                    fnameflag = 0;

                }
            });

Upvotes: 3

Related Questions