当多个输入具有相同名称时，根据输入类型设置 jquery 表单验证

Question

我有一个表admin_config，是这样的：-

在 Laravel 中构建表单时，我是这样做的：-

{{ Form::open(array(
                  'method' => 'POST',
                  'class' => 'form-horizontal form-label-left',
                  'route' =>  ['edit_settings'],
                  'id' => 'editSettingsForm',
                  'files' => true,
                  'novalidate' => true)) }}

<div class="col-md-12 col-sm-12 col-xs-12">
  @foreach($configList as $key => $cl)
  <div class="item form-group">
    @php
    $caption = $cl['config_key'];
    $caption = str_replace('_', ' ', $caption);
    @endphp
    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="config_key">@if($caption == 'emails'){{ 'Admin ' . ucfirst($caption) }}@else{{ ucfirst($caption) }}@endif <span class="required">*</span>
    </label>
    <div class="col-md-9 col-sm-9 col-xs-12">
      {{ Form::hidden('config_key[]', $cl['config_key'], array(
                              'id' => 'config_key_' . $key,
                              'class' => 'form-control col-md-7 col-xs-12',
                              'data-validate-length-range' => '3,50',
                              'placeholder' => 'Config Key',
                              'required' => 'required' )) }}
      @if($cl['value_unit'] == 'date')
      {{ Form::select('config_value[]', 
                      array(
                        'd-m-Y' => 'd-m-Y',
                        'd/m/Y' => 'd/m/Y',
                        'd.m.Y' => 'd.m.Y',
                        'Y-m-d' => 'Y-m-d',
                        'Y/m/d' => 'Y/m/d',
                        'Y.m.d' => 'Y.m.d',
                        'm-d-Y' => 'm-d-Y',
                        'm/d/Y' => 'm/d/Y',
                        'm-d-Y' => 'm.d.Y'
                      ), 
                      $cl['config_value'], 
                      array(
                        'class' => 'form-control col-md-7 col-xs-12', 
                        'id'    => 'config_value_' . $key
                      )) }}
      @elseif($cl['value_unit'] == 'time')  
      {{ Form::select('config_value[]', 
                      array(
                        'H:i:s'   => 'H:i:s',
                        'H.i.s'   => 'H.i.s',

                        'H:i'     => 'H:i',
                        'H.i'     => 'H.i',

                        'h:i:s A' => 'h:i:s A',
                        'h.i.s A' => 'h.i.s A',
                        'h:i:s a' => 'h:i:s a',
                        'h.i.s a' => 'h.i.s a',

                        'h:i A'   => 'h:i A',
                        'h.i A'   => 'h.i A',
                        'h:i a'   => 'h:i a',
                        'h.i a'   => 'h.i a'
                      ), 
                      $cl['config_value'], 
                      array(
                        'class' => 'form-control col-md-7 col-xs-12', 
                        'id'    => 'config_value_' . $key
                      )) }}
      @elseif($cl['value_unit'] == 'url')  
      {{ Form::url('config_value[]', $cl['config_value'], array(
                              'id' => 'config_value_' . $key,
                              'class' => 'form-control col-md-7 col-xs-12',
                              'data-validate-length-range' => '3,50',
                              'placeholder' => 'Config value',
                              'required' => 'required' )) }}
      @else                      
      {{ Form::text('config_value[]', $cl['config_value'], array(
                              'id' => 'config_value_' . $key,
                              'class' => 'form-control col-md-7 col-xs-12',
                              'data-validate-length-range' => '3,50',
                              'placeholder' => 'Config value',
                              'required' => 'required' )) }}
      @endif
    </div>
  </div>
  @endforeach
  <div class="ln_solid"></div>
  <div class="form-group">
    <div class="col-md-6 col-md-offset-3">
      <a class="btn btn-primary back_new" href="{{url('/cpanel/dashboard/')}}">Back</a>
      <button id="send" type="submit" class="btn btn-success submit_new">Submit</button>
    </div>
  </div>
</div>

<div style="clear:both;"></div>
{{ Form::close() }}

HTML 表单如下所示：-

我需要对表单进行 jquery 表单验证。当前的表单验证是这样的：-

$(document).ready(function(){
    $("#editSettingsForm").validate({
        ignore: [],
        rules: {
            'config_value[]': {
                required: true
            }
        },
        messages: {
            'config_value[]': {
                required: "Please enter value"
            }
        }
    });
});

我想检查额外的验证，比如如果输入类型在 url 中，那么它将有特殊的 url 验证规则和消息。

我该怎么做？

编辑：

1. 多个输入元素具有相同的名称，即。配置值[]。
2. name=config_value[] 的一个元素可能是 type='text'，而 name=config_value[] 的另一个元素可能是 type='url.'。
3. type='url' 的那个应该有 url 验证规则，而那个 type='text'，不应该有 url 验证规则

Answer 1

您好，请尝试一下，希望这能解决您的 url 验证问题

$( "#myform" ).validate( {
  // This global normalizer will trim the value of all elements
  // before validatng them.
  normalizer: function( value ) {
    return $.trim( value );
  },
  rules: {
    username: {
      required: true
    },
    url_input: {
      required: true,
      url: true,

      // We don't need to trim the value of this element, so we overrided
      // the global normalizer in order to append 'http://' to the url value
      // if doesn't already.
      normalizer: function( value ) {
        var url = value;

        // Check if it doesn't start with http:// or https:// or ftp://
        if ( url && url.substr( 0, 7 ) !== "http://"
            && url.substr( 0, 8 ) !== "https://"
            && url.substr( 0, 6 ) !== "ftp://" ) {
          // then prefix with http://
          url = "http://" + url;
        }

        // Return the new url
        return url;
      }
    }
  }
} );

或者你也可以使用它

$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      url: true
    }
  }
});