引导表单验证不工作

Bootstrap form validation not working

本文关键字：工作验证表单更新时间：2023-09-26

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

这是一个工作小提琴

问题是你的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 */
    });
});