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

Posted 2023-05-09

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

【英文标题】：Set jquery form validation based on type of input when multiple inputs have same name

【发布时间】：2019-11-10 02:44:13

【问题描述】：

我有一个表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 验证规则和消息。

我该怎么做？

编辑：

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

【问题讨论】：

请检查此链接以进行 url 验证：jqueryvalidation.org/url-method

【参考方案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
    
  
);

【讨论】：

您是否意识到所有输入字段的名称相同，而输入类型可能不同？一个具有 name=config_value[] 的元素可能是 type='text'，而另一个具有 name=config_value[] 的元素可能是 type='url.'。 type='url'的应该有url验证规则，type='text'的不应该有url验证规则。

对不起，我没有检查，但你可以使用 css 不确定它是否是你的解决方案codepen.io/desaraev/pen/ykLIp

或者你可以查看forum.jquery.com/topic/…