2

バリデータ プラグインを使用してフォームを検証しています。タイプ=ファイルの単一の入力ボックスを持つ単純なフォームがあります。

フォームフィールドを必須に設定すると思われるルールを設定しました。フォームが読み込まれ、ファイル名を入力したり、ファイルを参照したりせずに [送信] ボタンをクリックすると、フォームが検証されます。

検証に失敗し、ファイルを選択する必要があることを示すエラー メッセージを生成するフォームが必要です。

どんな助けでも大歓迎です。

<%@ 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>

4

1 に答える 1