具有确定类的输入的jquery验证答案

【问题标题】：jquery validation for inputs with definite class具有确定类的输入的jquery验证
【发布时间】：2016-10-01 04:48:00
【问题描述】：

我正在使用 jquery 验证器。我需要为具有明确类别的输入字段添加验证规则和消息。

字段：

'director_front_passport[]','director_back_passport[]','director_address_document[]' 是数组，我有一个隐藏的 div 具有相同的字段名称，但我需要只需要这些具有类 director_documents 的字段。

我的意思是，我有两个具有相同输入字段的 div - 还有数组，但我只需要使用类 director_documents 的这些输入字段。该怎么做？

我的代码是：

var images = ['director_front_passport[]','director_back_passport[]','director_address_document[]','corporate_document[]'];
var extn ="jpeg|jpg|gif|png|pdf";
for(var i=0;i< images.length;i++) {
  var $inputImage;
  $inputImage = images[i];
  rules[$inputImage] = {};
  rules[$inputImage].required  = true;
  rules[$inputImage].extension = extn;

  msgs[$inputImage] =  'Please provide an image with one of the following extensions : jpg, gif, png or pdf';

}
var validateObj           = {}
validateObj["rules"]      = rules;
validateObj["messages"]   = msgs;
validateObj["onkeyup"]    = function(element) { $(element).valid();};
validateObj["errorPlacement"] = function(error, element) {
  if($(element).hasClass('app-file')) {
    error.insertAfter($(element).next().next());
  }
  

};
validateObj["success"] = function(element) {};
validateObj["submitHandler"] = function (form) {
  form.submit();
}
$("#form").validate(validateObj);

<div class="director-uploads" id="director-uploads1">
  <div class="form-group">
    <label for="director_front_passport" class="col-md-2 director-label-file">{{translate("Front ID/Passport")}}</label>
    <div class="col-md-8 file-wrapper">
      {{ Form::file('director_front_passport[]',  ["class"=>"app-file director_documents"]) }}
      <label for="director_front_passport" class="file-upload"><span>{{translate("Upload a File")}}</span></label>
      <div class="file-name"></div>
      <label for="director_front_passport" generated="true"  class="<?php echo $errors->has('director_front_passport') ? 'error' : '';?>">{{ $errors->first('director_front_passport') }}</label>
    </div>
  </div>
  <div class="form-group">
    <label for="director_back_passport" class="col-md-2 director-label-file">{{translate("Back ID/Passport")}}</label>
    <div class="col-md-8 file-wrapper">
      {{ Form::file('director_back_passport[]',  ["class"=>"app-file director_documents"]) }}
      <label for="director_back_passport" class="file-upload"><span>{{translate("Upload a File")}}</span></label>
      <div class="file-name"></div>
      <label for="director_back_passport" generated="true"  class="<?php echo $errors->has('director_back_passport') ? 'error' : '';?>">{{ $errors->first('director_back_passport') }}</label>
    </div>
  </div>

</div>

【问题讨论】：

标签： javascript jquery validation

【解决方案1】：

您是否考虑过使用 HTML5 验证器？您可以使用正则表达式来检查您的图像扩展名（类似于下面验证电子邮件的方式）。 http://www.the-art-of-web.com/html/html5-form-validation/

要更改验证消息，您可以使用 oninvalid：

<input type="text" id="username" required placeholder="Enter Name"
    oninvalid="this.setCustomValidity('Enter User Name Here')"
    oninput="setCustomValidity('')"  />

Website: <input type="url" name="website" required pattern="https?://.+">
Email Address: <input type="email" name="email" required placeholder="Enter a valid email address">

【讨论】：

很高兴您找到了解决方案。

【解决方案2】：

我找到了解决办法：

for(var i=0;i< images.length;i++) {
  var $inputImage;
  $inputImage = images[i]; 
  if($('input[name="' + $inputImage + '"]').hasClass('director_documents')) {
    rules[$inputImage] = {}; console.log(1);
    rules[$inputImage].required = true;
    rules[$inputImage].extension = extn;

    msgs[$inputImage] = 'Please provide an image with one of the following extensions : jpg, gif, png or pdf';
  }

}

【讨论】：