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

Question

I have a table admin_config, which is like this:-

WHile building the form in Laravel, I am doing it like this:-

{{ 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() }}

The HTML form look like this:-

I need a jquery form validation for the form. The current form validation is like this:-

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

I want to check extra validation, like if the input type in url, then it will have special url validation rule and message.

How can I do that?

Edit:

1. Multiple input elements have same name, ie. config_value[].
2. One element with name=config_value[] may be of type='text', while another element with name=config_value[] may be of type='url.'.
3. The one with type='url' should have url validation rule, while the one with type='text', should not have the url validation rule

Answer 1

Hello Please try this hope this will solve your problem for url validation

$( "#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;
      }
    }
  }
} );

Or you can use this also

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