Dynamic fields are not becoming required in jquery validation

Question

Here i want to make all dynamic fields required that are calling from an ajax page so in order to make all fields required i wrote the code like this

<script src="http://demo.expertphp.in/js/jquery.validate.min.js"></script>
<script>
 $('#toUploadButton').on('click', function(e){
  e.preventDefault();
  e.stopPropagation();
  $('input.product_price').each(function() {
  $(this).rules("add", 
      {
          required:true,
          messages: {
              required: "Name is required",
          }
      });
  });
  e.preventDefault();
 $("#add_product").validate();
});
</script>

My ajax view file looks like this

<tr class="tr_clone_product ajax_result">
  <td style="width:200px;"><input class="product_price" type="text" name="product_price[]" id="product_price" style="width:200px;"></td>  
</tr>

My main view file is here

<form method="POST" name="add_product" id="add_product" enctype="multipart/form-data" action="{{ url('/admin/products/store') }}">
@csrf

<div class="col-12">
    <table class="table table-bordered all_products">
        <thead>
            <tr>
            <th>SKU</th>
            <th>Name</th>
            <th>Qty</th>
            <th>Price</th>
            <th></th>
            </tr>
        </thead>
        <tbody class="product_list">
        </tbody>
    </table>
</div>
</div>
<div class="form-group row">
  <div class="offset-4 col-8">
    <button name="toUploadButton" type="button"  id="toUploadButton" class="btn btn-primary">Submit</button>
  </div>
</div>

Here in the place of class product_list the ajax page is loading and i want to make all the fields inside the ajax page to be required but the problem is only the first row is becoming required

you should attach validation rule after input dynamically loaded i.e. inside your ajax call from where you are adding product price inputs — Bhushan Kawadkar, Oct 21 '20 at 08:24
@BhushanKawadkar i just added the same way as you told but its not working — user_777, Oct 21 '20 at 08:26
Can you reproduce this issue with code snippet or jsfiddle so that i can take a look at it — Bhushan Kawadkar, Oct 21 '20 at 08:27
`$('input.product_price')` is *not* a "live" query - it gets those inputs that exist at the time the code runs. If you add controls later, this won't be applied. — freedomn-m, Oct 21 '20 at 08:27
Does this answer your question? [jQuery - How to dynamically add a validation rule](https://stackoverflow.com/questions/3033910/jquery-how-to-dynamically-add-a-validation-rule) — freedomn-m, Oct 21 '20 at 08:39
Apparently you need call .validate() before adding the rule, see https://stackoverflow.com/a/3034059/2181514 — freedomn-m, Oct 21 '20 at 08:40
*only the first row* - I'm not sure about jquery,validate, but quite often these things require a *unique* id on each control (or possibly *no id*) - your ajax returns ` — freedomn-m, Oct 21 '20 at 08:42
Didn't say you were, I said jquery.validate *might* be - but worth ruling out and fixing anyway because IDs must be unique within a DOM document. It also matches the "first row" only observation. — freedomn-m, Oct 21 '20 at 08:45

Dynamic fields are not becoming required in jquery validation

0 Answers0