Question

我必须使用jquery生成动态输入，并使用jquery验证插件对其进行验证。问题在于它仅验证第一个输入字段。

我尝试了所有事情，例如更改验证规则，更改版本，更改循环等

我当前的Jquery版本如下。

jquery v3.2.1 验证v1.11.1 其他方法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",
            }
        }
    });
});

Answer 1

将规则函数与循环一起使用，alpha规则不存在，请使用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/jquery-validation@1.19.1/dist/jquery.validate.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/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>

对于要在提交时触发的所有错误，您需要为每个输入内容输入uique名称

$( "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/jquery-validation@1.19.1/dist/jquery.validate.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/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>

Answer 2

问题出在名称字段索引中。我只是在name属性中添加了索引，并更改了一些jquery验证规则。

问题

<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" >

已解决

<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" >

更改验证规则自

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

要

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

希望这可以节省其他人的时间，因为我花了三天的时间来解决它！

jQuery动态生成输入仅在Laravel 5.8中首先验证

2 个答案: