How to validate at least one input from inputs array using jquery

Question

I have a table structured inputs array (like registrant,firstname, phone, email) like below html.

$('#register_form').validate({ 
  rules: {
    'firstname[]': {
      required: true,
    },
    'phone[]': {
      required: true,
    },
    'email[]': {
      required: true,
    },
    event: {
      required: true,
    },
  },
  messages: {
    'firstname[]': {
      required: "Please enter registrant name",
    },
    'phone[]': {
      required: "Please enter registrant phone",
    },
    'email[]': {
      required: "Please enter registrant email",
    },
    event: {
      required: "Please check atleast one event",
    },
  },
  errorPlacement: function(error, element) {
    error.appendTo( element.closest("div") );
  },
});

.registrant_table{width: 100%;border: 1px solid #ccc;text-align: center;}
.registrant_table tr td{border: 1px solid #ccc;height: 42px;font-weight: bolder;}
.registrant_table input{border: 0px !important;width: 100%;height: 42px;text-align: center;font-weight: normal;}
label.error{color: red !important;}

<form method="post" action="" name="register_form" id="register_form">
  <div>
    <table class="registrant_table">
      <tr>
        <td>No</td>
        <td>Official Full Name</td>
        <td>Mobile Contact</td>
        <td>Email</td>
      </tr>
      <tr>
        <td>1</td>
        <td><input type="text" name="firstname[]"></td>
        <td><input type="text" name="phone[]"></td>
        <td><input type="text" name="email[]"></td>
      </tr>
      <tr>
        <td>2</td>
        <td><input type="text" name="firstname[]"></td>
        <td><input type="text" name="phone[]"></td>
        <td><input type="text" name="email[]"></td>
      </tr>
      <tr>
        <td>3</td>
        <td><input type="text" name="firstname[]"></td>
        <td><input type="text" name="phone[]"></td>
        <td><input type="text" name="email[]"></td>
      </tr>
      <tr>
        <td>4</td>
        <td><input type="text" name="firstname[]"></td>
        <td><input type="text" name="phone[]"></td>
        <td><input type="text" name="email[]"></td>
      </tr>
      <tr>
        <td>5</td>
        <td><input type="text" name="firstname[]"></td>
        <td><input type="text" name="phone[]"></td>
        <td><input type="text" name="email[]"></td>
      </tr>
    </table>
  </div>
  <br>
  <div class="col-md-4 col-sm-6 col-xs-12">
    <label>Please tick the event you are joining:</label><br>
  </div>
  <div class="col-md-8 col-sm-6 col-xs-12 checkbox_container">
    <input type="checkbox" name="event" value="26-27 April 2018, Royale Chulan Damansara, Malaysia">&nbsp;&nbsp;&nbsp;26-27 April 2018, Royale Chulan Damansara, Malaysia<br>
    <input type="checkbox" name="event" value="3-4 May 2018, Grand Hyatt, Singapore">&nbsp;&nbsp;&nbsp;3-4 May 2018, Grand Hyatt, Singapore<br>
    <input type="checkbox" name="event" value="Royal Plaza Hotel, Mongkok, Hong Kong">&nbsp;&nbsp;&nbsp;Royal Plaza Hotel, Mongkok, Hong Kong<br>
    <input type="checkbox" name="event" value="Grand Hyatt, Menteng, Jakarta, Indonesia">&nbsp;&nbsp;&nbsp;Grand Hyatt, Menteng, Jakarta, Indonesia<br>
  </div>
  <p>&nbsp;</p>
  <p style="text-align: center;"><input type="submit" value="submit" name="submit"></p>
</form>

I have added my code fiddle here

It's working fine for one registrant. Not working more than one same inputs.

My Questions are :

Case 1:

How to validate at least one registrant's all inputs (name, phone, email) filled or not?
Case 2 :

If one registrant filled all three inputs. Then I fill the second registrant's name (or phone or email) only. Then click submit.

How to show the second registrant's phone and email's error message ?

If user not register second registrants name or phone or email. Don't need to validate that row. (It's same for other registrant like 3,4,5 also).

I need both cases to be satisfied.

please what you mean by this "Then i fill the second registrant's name (or phone or email) only. Then click submit." — Mohammad Fahmawi
– Mohammad Fahmawi, Commented Mar 27, 2018 at 12:53
Once i enter the first registrant details (name, phone, email). And then add second registrant details like name or phone or email (only one input for that registrant). After that i click submit button. — Sarvan Kumar
– Sarvan Kumar, Commented Mar 27, 2018 at 13:07

Vijaya Vignesh Kumar · Accepted Answer · 2018-03-28 09:17:28Z

Here I added the class for the each row and validate by getting the values of each row elements.

It works for both cases as you mentioned above.

HTML CODE:

<div>
    <table class="registrant_table">
        <tr class="title">
            <td>No</td>
            <td>Official Full Name</td>
            <td>Mobile Contact</td>
            <td>Email</td>
        </tr>
        <tr class="in-fields">
            <td>1</td>
            <td><input type="text" value="" name="firstname[]"></td>
            <td><input type="text" value="" name="phone[]"></td>
            <td><input type="text" value="" name="email[]"></td>
        </tr>
        <tr class="in-fields">
            <td>2</td>
            <td><input type="text" name="firstname[]"></td>
            <td><input type="text" name="phone[]"></td>
            <td><input type="text" name="email[]"></td>
        </tr>
        <tr class="in-fields">
            <td>3</td>
            <td><input type="text" name="firstname[]"></td>
            <td><input type="text" name="phone[]"></td>
            <td><input type="text" name="email[]"></td>
        </tr>                   
    </table>
</div>

Style:

.registrant_table{width: 100%;border: 1px solid #ccc;text-align: center;}
.registrant_table tr td{border: 1px solid #ccc;height: 42px;font-weight: bolder;}
.registrant_table input{border: 0px !important;width: 100%;height: 42px;text-align: center;font-weight: normal;}
label.error{color: red !important;}
.err-fields{background-color:red;color: white !important;}

Script:

$(document).ready(function() {      
   $("#submit").click(function() {
    var i =1; var atleast = 0;
    var allempty=0; var anyfield=0; 
    console.clear();
    $(".err-fields").remove();
    $(".in-fields").each(function(){                        
        var txt     = $(this).find("input[name='firstname[]']").val();
        var phon    = $(this).find("input[name='phone[]']").val();
        var mail    = $(this).find("input[name='email[]']").val();
        console.log($(this));
        if((txt!="") && (phon!="") && (mail!=""))  {// atleast one
            atleast++;
        } else if((txt=="") && (phon=="") && (mail=="")) {
            allempty++;
        } else {
            anyfield++;
            var txterr=pherr=mailerr="";
            if(txt=="")
                txterr = "Name field is empty";
            if(phon=="") 
                pherr = "Contact field is empty";
            if(mail=="") 
                mailerr = "Email field is empty";
            $('<tr class="err-fields"><td colspan="2">'+txterr+'</td><td>'+pherr+'</td><td>'+mailerr+'</td></tr>').insertAfter($(this).closest('tr'));
                return false;
            }
        });
        if(atleast==0 && anyfield==0) {
            $(".err-fields").remove();
            $('<tr class="err-fields"><td colspan="4">Fill atleast one row fields</td></tr>').insertAfter($('table tr:last'));
        } else if(anyfield==0) {
            $(".err-fields").remove();
            console.log("form submitted");
        }
    });
});

That's one method of doing that. But i need to satisfied with valiadtion.js also...

Collectives™ on Stack Overflow

How to validate at least one input from inputs array using jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related