“文件类型”和“文件大小”的验证无效

Question

我已创建表单，我想对File Type和File Size应用验证。我使用了来自demo的jquery.form-validator.js插件 但它不适用于文件类型和文件大小。而它正在为其他验证类型工作。

表单的HTML代码，如下所示

＆＃13;

＆＃13;

$.validate({
  form: '#registration',

  validateOnBlur: true,
  showHelpOnFocus: true,
  addSuggestions: true,
  onSuccess: function($form) {
    alert("sucess")
    return false;
  },
  onError: function() {
    alert("Error")
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/theme-default.min.css" rel="stylesheet" type="text/css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>

<form id="registration" method="post" action="@Url.Action(" NewRegistration ", "StaticPage ")" enctype="multipart/form-data" class='has-validation-callback'>


  <div class="nwresfildblkwrap">
    <span>*</span>
    <input class="nwresmainfild" name="SignId" placeholder="LOGIN ID" data-validation="required" />

  </div>



  <div class="nwresformrowblk nwdocresformrowblk">
    <div class="nwdocfild ibvm">
      <input class="nwresmainfild" placeholder="REGISTRATION NO." id="uploadFile" disabled="disabled" />
    </div>
    <div class="nwdocfildbut ibvm fileUpload btn btn-primary">
      <span class="browesbutton">Choose File</span>
      <input id="uploadBtn" type="file" name="FinalGstFile" data-validation="mime size" data-validation-allowing="jpg, pdf" data-validation-max-size="1M" class="upload" />
    </div>
  </div>

  <div class="rightcontent nwtcright">
    <div class="nwsumbit ibvt">
      <input value="PROCESS & PRINT" class="green-btn uppercase" type="submit" id="btnSubmit" />
    </div>
    <div class="nwreset ibvt">
      <input value="RESET" class="gray-btn uppercase" type="reset" />
    </div>
  </div>

</form>

＆＃13;

＆＃13;

＆＃13;

修改

我已修改为吼叫，

 $.validate({
    modules: 'file, date',
    form: '#registration',

    validateOnBlur: true,
    showHelpOnFocus: true,
    addSuggestions: true,
    onModulesLoaded : function() {
        alert('All modules loaded!');
    },
    onSuccess: function ($form) {
        alert("sucess")
        return false;
    },
    onError: function () {
        alert("Error")
    }
});

显示警告＆＃39;所有模块已加载！＆＃39;。但在控制台中显示错误Uncaught Error: Using undefined validator "validate_mime". Maybe you have forgotten to load the module that "validate_mime" belongs to?

Answer 1

使用代码<>创建代码段会立即在控制台中显示错误：

  

未捕获错误：使用未定义的验证程序“validate_mime”。也许您忘记加载“validate_mime”所属的模块？

您需要处理文件

http://www.formvalidator.net/#configuration

更改我在下面添加的行

  modules : 'file, date',

拥有你需要的东西

 /*$.formUtils.loadModules('location, date, file', null, function() {
         alert('modules loaded...');
     }); 
*/
$.validate({
  modules : 'file, date',
  form: '#registration',

  validateOnBlur: true,
  showHelpOnFocus: true,
  addSuggestions: true,
  onSuccess: function($form) {
    console.log("success")
    return false;
  },
  onError: function() {
    console.log("Error")
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/theme-default.min.css" rel="stylesheet" type="text/css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>

<form id="registration" method="post" action="@Url.Action(" NewRegistration ", "StaticPage ")" enctype="multipart/form-data" class='has-validation-callback'>


  <div class="nwresfildblkwrap">
    <span>*</span>
    <input class="nwresmainfild" name="SignId" placeholder="LOGIN ID" data-validation="required" />

  </div>



  <div class="nwresformrowblk nwdocresformrowblk">
    <div class="nwdocfild ibvm">
      <input class="nwresmainfild" placeholder="REGISTRATION NO." id="uploadFile" disabled="disabled" />
    </div>
    <div class="nwdocfildbut ibvm fileUpload btn btn-primary">
      <span class="browesbutton">Choose File</span>
      <input id="uploadBtn" type="file" name="FinalGstFile" data-validation="mime size" data-validation-allowing="jpg, pdf" data-validation-max-size="1M" class="upload" />
    </div>
  </div>

  <div class="rightcontent nwtcright">
    <div class="nwsumbit ibvt">
      <input value="PROCESS & PRINT" class="green-btn uppercase" type="submit" id="btnSubmit" />
    </div>
    <div class="nwreset ibvt">
      <input value="RESET" class="gray-btn uppercase" type="reset" />
    </div>
  </div>

</form>

这导致了