0

I have this type of multiple dynamic input fields :

$(function() {

    $("form#frmaddclass").validate({
        submitHandler: function(form) {
            alert("form valid");
            return false;
        }
    });

    $('select').each(function() {
        $(this).rules('add', {
            messages: {
                required: "custom select message"
            }
        });

    });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.2/dist/jquery.validate.js"></script>

<form method="POST" action="http://localhost:8000/admin/add" accept-charset="UTF-8" class="form-horizontal addclass" id="frmaddclass" enctype="multipart/form-data" novalidate="novalidate">

    <input class="form-control error" placeholder="Name" id="name" required="" name="name" type="text" value="" aria-invalid="true"><br/>

    <select class="form-control" required="" name="status">
        <option value="" selected="selected">Select</option>
        <option value="active">active</option>
        <option value="disabled">inactive</option>
    </select><br/>
    <select class="form-control" required="" name="subject[ETET][]">
        <option value="" selected="selected">Select</option>
        <option value="science">science</option>
        <option value="english">english</option>
    </select><br/>
    <select class="form-control" required="" name="subject[ETET][]">
        <option value="" selected="selected">Select</option>
        <option value="science">science</option>
        <option value="english">english</option>
    </select>
    <select class="form-control" required="" name="subject[ETET][]">
        <option value="" selected="selected">Select</option>
        <option value="science">science</option>
        <option value="english">english</option>
    </select>
    <br/>
    <input type="submit" />
</form>
<input type="text" name="subject[b3JxZ][]" class="form-control" aria-invalid="true">
<input type="text" name="subject[bs5xZ][]" class="form-control" aria-invalid="true">

but here i don't know the indexes, and i'm using the following code to validate my dynamic input fields but the issue is only the first input field is validated, other fields that are dynamically added are not getting validated.

$('.form-control').each(function() {
    $(this).rules("add", 
        {
            required: true,
            messages: {
                required: "This field is required",
            }
        });
});
Sparky
  • 98,165
  • 25
  • 199
  • 285
user3653474
  • 3,393
  • 6
  • 49
  • 135

0 Answers0