0

I have to generate dynamic inputs using jquery and validate it by using jquery validation plugin. The problem is it is just validating only first input field.

I have tried all the thing like changing validation rules, changing the version, changing the loops, etc

My Current Jquery version are as following.

jquery v3.2.1 validation v1.11.1 additional methods 1.16.0

<form method="POST" id="ovi" name="ovi" action="{{ route('booking.store') }}">
     @csrf
   // $BookingRequest->number_of_adults returns 3
  @for($i=1; $i<=$BookingRequest->number_of_adults; $i++)


<div class="col-sm-5 col-12">
<div class="form-group">
  <input id="first_name_{{$i}}" value="{{ old('first_name') }}" style="height:40px; font-size:0.9rem; border-radius:1px;" type="text" class="form-control @error('first_name') is-invalid @enderror" name="first_name[]" placeholder="First Name" >
   @error('first_name')
     <span class="invalid-feedback" role="alert">
         <strong>{{ $message }}</strong>
     </span>
 @enderror
 <div class="errormsg"></div>
</div>
</div>

 @endfor


//My JavaScript code

$(document).ready(function() {

    $.validator.addMethod("alpha", function(value, element) {
        return this.optional(element) || value == value.match(/^[a-zA-Z]{3,60}$/);
    });


    $("#ovi").validate({
        rules:{
            "first_name[]":{
                required: true,
                alpha   : true,
            }
        },
        messages:{
            "first_name[]":{
                required: "* first name is required",
                alpha   : "* Format is invalid",
            }
        }
    });
});

2 Answers 2

1

The Problem was in the name field indexing. I just added indexing in the name attribute and changed some jquery validation rules.

Problem

<input id="first_name_{{$i}}" value="{{ old('first_name') }}" style="height:40px; font-size:0.9rem; border-radius:1px;" type="text" class="form-control @error('first_name') is-invalid @enderror" name="first_name[]" placeholder="First Name" >

Solved

<input id="first_name{{$i}}" value="{{ old('first_name') }}" style="height:40px; font-size:0.9rem; border-radius:1px;" type="text" class="form-control @error('first_name') is-invalid @enderror" name="first_name[{{$i}}]" placeholder="First Name" >

Changing the validation rules FROM

 $("#ovi").validate({
    rules:{
        "first_name[]":{
            required: true,
            alpha   : true,
        }
    },
    messages:{
        "first_name[]":{
            required: "* first name is required",
            alpha   : "* Format is invalid",
        }
    }
});

TO

$("#ovi").validate({
  ignore: false,
 });
  $('[id^=first_name]').each(function(e) {
        $(this).rules('add', {
            minlength: 2,
            required : true
        });
    });

Hope this will save time to others as I spend three days to solve it!

0
0

Use the rules function with a loop, alpha rule doesn't exist use lettersonly

$( "form" ).validate();
$('[id^=first_name_]').each(function(v,input) {
  $(input).rules('add', {
    required: true,
    lettersonly: true,
    messages: {
      required: "* first name is required",
      lettersonly: "* Format is invalid",
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/additional-methods.min.js"></script>
<form>
<input id="first_name_1}"  style="height:40px; font-size:0.9rem; border-radius:1px;" type="text" class="form-control @error('first_name') is-invalid @enderror" name="first_name[]" placeholder="First Name" >
<input id="first_name_2"  style="height:40px; font-size:0.9rem; border-radius:1px;" type="text" class="form-control @error('first_name') is-invalid @enderror" name="first_name[]" placeholder="First Name" >

<button>submit</button>
</form>

For all your error to trigger on submit you need uique names for each of your inputs

$( "form" ).validate();
$('[id^=first_name_]').each(function(v,input) {
  $(input).rules('add', {
    required: true,
    lettersonly: true,
    messages: {
      required: "* first name is required",
      lettersonly: "* Format is invalid",
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/additional-methods.min.js"></script>
<form>
<input id="first_name_1}"  style="height:40px; font-size:0.9rem; border-radius:1px;" type="text" class="form-control @error('first_name') is-invalid @enderror" name="first_name[1]" placeholder="First Name" >
<input id="first_name_2"  style="height:40px; font-size:0.9rem; border-radius:1px;" type="text" class="form-control @error('first_name') is-invalid @enderror" name="first_name[2]" placeholder="First Name" >

<button>submit</button>
</form>

8
  • Thank you for your time. I tried your solution but the results are same (only validating first input)
    – Owais Noor
    Commented Aug 29, 2019 at 11:27
  • you are appending the new rows with jquery? Commented Aug 29, 2019 at 11:29
  • yes but I am appending it by PHP code. Using for loop
    – Owais Noor
    Commented Aug 29, 2019 at 11:32
  • are you using javascript or php for the append?where is the append logic?does my update work? Commented Aug 29, 2019 at 11:39
  • I am using PHP to generate dynamic rows. @for($i=1; $i<=$BookingRequest->number_of_adults; $i++) // here is inputs @endfor No Your Code didn't work
    – Owais Noor
    Commented Aug 29, 2019 at 11:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.