引导表单验证不起作用答案

【问题标题】：Bootstrap form validation not working引导表单验证不起作用
【发布时间】：2014-07-26 16:11:17
【问题描述】：

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

【问题讨论】：

标签： javascript jquery validation jqbootstrapvalidation

【解决方案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 */
    });
});

【讨论】：