Question

我的网页应用程序中有一个页面，可以选择上传文件。我想在提交表单之前验证是否有选择上传的文件。我使用jQuery form validator插件进行表单验证。

我的文件输入标记的html代码是：

<div class="form-group">
 <label for="exampleInputFile">New File</label>
 <input type="file" id="file_add" name="file">                                         
</div>

我正在尝试使用以下代码检查是否选择了任何文件：

$.formUtils.addValidator({
      name : 'file_check',
      validatorFunction : function(value, $el, config, language, $form) 
      {
      if($('#addFile').val() == "")
        return $('#file_add').val() == "" == 0;
      },
      errorMessage : 'Please choose a file',
      errorMessageKey: 'notConfirmed'
    });

但即使没有选择上传文件，表单提交仍然会发生。有什么方法可以检查在提交之前是否选择了文件.....

Answer 1

在您提供的链接中，该页面右侧窗格中有专门的文件验证部分：http://formvalidator.net/#file-validators

之前我没有使用过这个验证器插件。话虽如此，基于this example，我相信您的代码应该是这样的：

HTML：

<div class="form-group">
 <label for="file_add">New File</label>
 <input type="file" id="file_add" name="file" data-validation="file_check">                                         
</div>

也就是说，我使用自定义验证的名称为其添加了data-validation属性。

jQuery的：

$.formUtils.addValidator({
      name : 'file_check',
      validatorFunction : function(value, $el, config, language, $form) 
      {
        if(value.trim() == "") // the "value" variable will have the value
          return false;
        else
          return true;
      },
      errorMessage : 'Please choose a file',
      errorMessageKey: 'notConfirmed'
});

我只是根据示例手写了这段代码，因此未经测试。我想这会有所帮助。

Answer 2

您可以使用以下内容：

$.formUtils.addValidator({
      name : 'file_check',
      validatorFunction : function(value, $el, config, language, $form) 
      {
        var value = $('#file_add').val();
        if(value.trim() == "") 
          return false;
        else
          return true;
      },
      errorMessage : 'Please choose a file',
      errorMessageKey: 'notConfirmed'
    });

同样在你的html代码中，添加验证器的名称和要显示的错误消息：

<div class="form-group">
<label for="exampleInputFile">New File</label>
<input type="file" id="file_add" name="file" data-validation="file_check" data-validation-error-msg="Choose An Image File To Upload" >                                         
</div>

这应该是完美的

如何使用jquery验证器在提交表单之前验证是否选择上载文件

2 个答案: