所需的引导验证程序文件名在应该验证时不会失败答案

【问题标题】：Bootstrap validator file name required does not fail validation when it should所需的引导验证程序文件名在应该验证时不会失败
【发布时间】：2016-03-17 17:44:54
【问题描述】：

我正在使用验证器插件来验证我的表单。我有一个带有 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>

【问题讨论】：

标签： javascript forms twitter-bootstrap validation bootstrapvalidator

【解决方案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

【讨论】：

我复制并粘贴了您修改后的脚本，但结果没有任何变化。当我单击提交按钮而不指定文件名时，表单仍然有效。如果我单击“选择文件”并选择接受的文件类型以外的文件，它确实会失败验证，这很好。还有其他想法吗？
尝试从脚本中删除container: '#messages',
检查了容器：'#messages'，jsfiddle.net/Ltuq9v67/3 并且它正在工作，你需要检查浏览器控制台日志是否有错误，看看有什么
旁注：使用最新版本的bootstrapValidator，你可以从这里得到它cdnjs.com/libraries/bootstrap-validator
移除容器成功！感谢您的时间和帮助！