-1

ブートストラップ バリデーターを使用してユーザー名とパスワード フィールドを検証しようとしています。ブートストラップ バリデーター用に css と js を含めました。検証するフォームIDは#login

コードは以下の通り 

<head>
    <script type='text/javascript' src='js/jquery-2.1.1.min.js'></script>
            <script type="text/javascript" src="js/jquery-ui.js"></script>
                       <link rel="stylesheet" href="js/bootstrap-3.1.1-dist/css/bootstrap.min.css"/>
            <link rel="stylesheet" href="js/bootstrap-3.1.1-dist/css/bootstrap-theme.min.css"/>
            <script type='text/javascript' src="js/bootstrapvalidator-dist-0.4.5/dist/js/bootstrapValidator.min.js"></script>
            <script type='text/javascript' src="js/bootstrapvalidator-dist-0.4.5/dist/css/bootstrapValidator.min.css"></script>
            <script>
                $(document).ready(function() {
                    $('#login').bootstrapValidator({
                        feedbackIcons: {
                            valid: 'glyphicon glyphicon-ok',
                            invalid: 'glyphicon glyphicon-remove',
                            validating: 'glyphicon glyphicon-refresh'
                        },
                        fields: {
                            userName: {
                                validators: {
                                    notEmpty: {
                                        message: 'User Name required'
                                    }
                                }
                            },
                            password: {
                                validators: {
                                    notEmpty: {
                                        message: 'TPassword required'
                                    }
                                }
                            }
                        }
                    });
                });</script>
</head>
    <body>
    <form action="login" method="post" id="login" > 
                                    <div class="form-group">
                                        <label class="control-label" for="userName">
                                            User Id
                                        </label>
                                        <input type="text" placeholder="Username" name="userName" id="userName" class="form-control lgn">
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label" for="Password">
                                            Password
                                        </label>
                                        <input type="password" placeholder="Password" name="password" id="password" class="form-control lgn">
                                    </div>
                                    <div class="form-group">
                                        <button type="submit" class="btn btn-success lgn" >Login</button>
                                    </div>
                                </form>
    </body>

これを解決する方法。

フィドルのデモ jsfiddle.net/xrcwrn/3bthv

4

1 に答える 1