Question

我正在使用验证程序插件来验证我的表单。我有一个带有type = file的单个输入框的简单表单。

我已经设置了一条规则，我认为将表单字段设置为必需。加载表单时，单击“提交”按钮而不输入文件名或浏览到文件，表单将得到验证。

我需要表单验证失败并生成错误消息，指出需要选择文件。

非常感谢任何帮助。

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="test_file_upload.aspx.vb" Inherits="ARDirectWithMobile.test_file_upload" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title id="titleTag"><%: Page.Title %> 401(k) Account</title>
<asp:PlaceHolder runat="server">
    <%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
    <script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>  
    <script src="Scripts/bootstrap.min.js"></script>  
    <link runat="server" id="StyleLink1" rel="stylesheet" type="text/css" href="/Content/bootstrap.css" />
    <link rel="stylesheet" href="Content/bootstrapValidator.min.css"/> 
    <script type="text/javascript" src="Scripts/bootstrapValidator.min.js"> </script>
</head>
<body>

<form id="contactForm" runat="server" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-md-3 control-label">File Name</label>
        <div class="col-md-6 bs-example">
            <input type="file" class="form-control" name="uploadfile" />
            <asp:Label ID="Label3" runat="server" Text="Navigate to the file you wish to upload" CssClass="label_under_text"></asp:Label>	
	    </div>                          
    </div>
    <div class="form-group">
        <div class="col-md-9 col-md-offset-3">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </div>
</form>
    
    <script>
        $(document).ready(function () {
            $('#contactForm').bootstrapValidator({
                container: '#messages',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                rules: {
                    uploadfile: {
                        required: true
                    }
                },
                fields: {
                    uploadfile: {
                        validators: {
                            file: {
                                extension: 'txt,xls,csv',
                                message: 'You must select a valid payroll file to upload'
                            }
                        }
                    }
                }
            });
        });
    </script>
    
</body>
</html>

Answer 1

首先，您不需要rule

rules: {
    uploadfile: {
        required: true
    }
},

其次，你必须设置notEmpty所以bootstrapValidator检查文件输入

notEmpty: {
  message: 'You must select a valid payroll file to upload'
},

第三，您必须为type设置extensions，在您的情况下文件扩展名为'txt,xls,csv',，我认为不支持csv，您可能需要自定义验证规则为了它。（见底部的编辑）

BootstrapValidator Supported file formats

$(document).ready(function () {
    $('#contactForm').bootstrapValidator({
      container: '#messages',
      feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
      },
      fields: {
        uploadfile: {
          validators: {
            notEmpty: {
              message: 'You must select a valid payroll file to upload'
            },
            file: {
              extension: 'txt,xls,csv',
              type: 'text/plain,application/vnd.ms-excel,text/csv'
            }
          }
        }
      }
    });
});

修改：您可以将csv扩展名验证为`text / csv＆＃39;没有自定义验证。

Fiddle

所需的Bootstrap验证器文件名在验证时不会失败

1 个答案: