Question

我想使用bootstrapvalidator验证名称和电子邮件字段。当我点击下一步按钮步骤按钮时，它会转到下一步，名称和电子邮件字段仍为空，并且不会显示任何错误。请提前帮助谢谢

<!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>Bootstrap Validator</title>
        <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">
        <script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
        <script>
    $(function() {

        //Step function
        $('#next_step_2').on("click",this,function(){
            $('.step_1').slideUp("fast");
            $('.step_2').slideDown("fast");
        });

        $('#previous_step_1').on("click",this,function(){
            $('.step_2').slideUp("fast");
            $('.step_1').slideDown("fast");
        });


        //Validate Form
        $('#form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                names: {
                    message: 'The Name is not valid',
                    validators: {
                        notEmpty: {
                            message: 'The Name is required and cannot be empty'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: 'The email is required and cannot be empty'
                        },
                        emailAddress: {
                            message: 'The input is not a valid email address'
                        }
                    }
                },
                phone: {
                    message: 'The Phone is not valid',
                    validators: {
                        notEmpty: {
                            message: 'The Phone is required and cannot be empty'
                        },
                        integer: {
                            message: 'The value is not an integer'
                        }
                    }
                },
                country: {
                    message: 'The Country is not valid',
                    validators: {
                        notEmpty: {
                            message: 'The Country is required and cannot be empty'
                        }
                    }
                }
            }
        })
        .on('success.form.bv', function(e) {
            alert("Thanks You!!!");
        })
    });
        </script>
    </head>

    <body>

    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <form name="form" class="form" id="form" method="post">


                    <!--Step_1-->
                    <div class="step_1">

                        <legend>Step 1</legend> 

                        <div class="col-xs-6">
                            <div class="form-group">
                                <label class="control-label">Names</label>
                                <input type="text" id="names" name="names" class="form-control">
                            </div>
                        </div>

                        <div class="col-xs-6">
                            <div class="form-group">
                                <label class="control-label">Email</label>
                                <input type="text" id="email" name="email" class="form-control">
                            </div>
                        </div>


                        <div class="col-xs-12">
                            <a href="javascript:void(0)" class="btn btn-primary" id="next_step_2">Next Step</a>
                        </div>

                    </div>
                    <!--End Step_1-->




                    <!--Step_2-->
                    <div class="step_2" style="display:none">

                        <legend>Step 2</legend> 

                        <div class="col-xs-6">
                            <div class="form-group">
                                <label class="control-label">Phone</label>
                                <input type="text" id="phone" name="phone" class="form-control">
                            </div>
                        </div>

                        <div class="col-xs-6">
                            <div class="form-group">
                                <label class="control-label">Country</label>
                                <input type="text" id="country" name="country" class="form-control">
                            </div>
                        </div>


                        <div class="col-xs-12">
                            <a href="javascript:void(0)" class="btn btn-primary" id="previous_step_1">Previous Step</a>
                            <button type="submit" class="btn btn-success">SEND FORM</button>
                        </div>

                    </div>
                    <!--End Step_2-->


                </form>
            </div>
        </div>    
    </div>

    </body>
    </html>

需要帮助bootstrap formvalidator无法正常工作

0 个答案: