验证jquery中表的所有输入

Question

I have a set of inputs that are dynamically generated and their id's incremented based on the number of items in an array

                    <table width="100%">

                      <?php $i = 1; ?>
                          <?php foreach ($products as $product) { ?>
                          <tr>
                            <td>
                                <p><b><?php echo $product['name']; ?></b></p>
                            </td>
                            <td>
                            </td>
                            <td>
                            </td>
                            <td>
                            </td>
                          </tr>
                          <tr>
                            <td>

                                <div class="form-group">
                                    <label class="control-label" for="firstname_<?php echo $i; ?>">First Name:</label>
                                    <input name="firstname_<?php echo $i; ?>" id="firstname_<?php echo $i; ?>" required>
                                </div>
                            </td>
                            <td>
                                <div class="form-group">
                                    <label class="control-label" for="lastname_<?php echo $i; ?>">Last Name:</label>
                                    <input name="lastname_<?php echo $i; ?>" id="lastname_<?php echo $i; ?>" required>
                                </div>
                            </td>
                            <td>
                                <div class="form-group">
                                    <label class="control-label" for="recipient_number_<?php echo $i; ?>"> Phone Number:</label>
                                    <input name="recipient_number_<?php echo $i; ?>" id="recipient_number_<?php echo $i; ?>" required>
                                </div>
                            </td>
                            <td>
                                <div class="form-group">
                                    <label class="control-label" for="recipient_email_<?php echo $i; ?>"> Email:</label>
                                    <input name="recipient_number_<?php echo $i; ?>" id="recipient_email_<?php echo $i; ?>" required>
                                </div>                                  
                            </td>
                          </tr>
                          <?php $i++; ?>
                      <?php } ?>

                </table>

I am trying to look for a way using JQuery to loop through all the generated inputs to ensure they are not empty

Answer 1

try using this - you can replace table with a table Id here - $('#tableId :input')

$('table :input').each(function(){
    //Enter your code to validate input
    console.log($(this).attr('name') + " : " + $(this).val());
});

Answer 2

Try this snippet.

This will allow you to validate the fields which are empty, and try to use the filter, that helps you to do it without any loop.

More information filter

 $('#sender_container').on('submit',function(e) { e.preventDefault(); validate(); }); function validate() { $('#sender_container > input[type="text"]') .removeClass('error') .filter(function() { // Remove error classes. Filter return !$.trim(this.value); }) .addClass('error'); }

 .error { border: 1px solid red; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form method="post" id="sender_container"> <input type="text" name="name[]" /> <input type="text" name="name[]" /> <input type="text" name="name[]" /> <input type="text" name="name[]" /> <input type="text" name="name[]" /> <input type="submit" name="submit" /> </form>