Question

我正在尝试使用bootstrap验证程序验证用户名和密码字段我已经为bootstrap验证器包含了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

Answer 1

Here is a working fiddle

问题是你的小提琴中包含的js代码包含语法错误。当你的javascript没有按预期工作时，控制台应该是你检查的第一件事。我在下面的代码中评论了我为使小提琴工作所做的改变。（看起来你问题中的代码很好）

$(document).ready(function() {
    $('#login').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            userName: {
                validators: {
                    notEmpty: {
                        message: 'The first name is required and cannot be empty'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: 'The last name is required and cannot be empty'
                    }
                }
            } /* <-- removed unneeded comma */
        } /* <-- added closing brace */
    });
});

Bootstrap表单验证无效

1 个答案: