Bootstrap 所需的验证程序文件名在应该验证时不会失败

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'
},

第三，你必须为 extensions 设置 type，在你的情况下，文件扩展名是 '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”，无需自定义验证。

Fiddle

Bootstrap 所需的验证程序文件名在应该验证时不会失败

Bootstrap validator file name required does not fail validation when it should

javascript

forms

twitter-bootstrap

validation

bootstrapvalidator