1

下面是我的代码,模态和 javascript 控制表单。验证不起作用。它返回是否满足验证要求,但是在提交时没有任何反应。我在另一个文件中有 jquery 和 bootstrap 链接。我正在使用 laravel 4。使用相同验证器的朋友可以使用它,但我们的代码执行没有区别。

如果我删除验证器,表单将以构造方式工作。我真的不知道这里发生了什么。任何和所有的帮助将不胜感激。

<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.1/css/bootstrapValidator.min.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.1/js/bootstrapValidator.min.js"></script>

<head>
    <!-- <link rel="stylesheet" href="css/Style_sheet.css" type="text/css" /> -->
    <title>The Transformers</title>
    <link rel="icon" href="/title_icon2.jpg">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- // <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> -->
</head>

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="http://getbootstrap.com/assets/js/docs.min.js"></script>

        <div class="modal fade" id="login_popup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><!--Login Popup-->
            <div class="modal-dialog">
                <div class="modal-content form-horizontal" role="form">

                    <div class="modal-header">
                        <button type="button" class="btn btn-danger btn-sm glyphicon glyphicon-remove pull-right" data-dismiss="modal"><span class="sr-only">Close</span>
                        </button>
                            <h4 class="modal-title text-inverse" id="myModalLabel">Login</h4>
                    </div>

                    <div class="modal-body form-group">
                        <form method="post" class="form-horizontal" id="login_form" action="{{ URL::route('account-login-post') }}" role="form">

                            <input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">

                            <div class="form-group">
                                <label for="input_email" class="col-sm-3 control-label text-inverse">Username:</label>
                                <div class="col-sm-6">
                                <input class="form-control" id="input_email" type="text" name="user_name" placeholder="Username" {{ (Input::old('username')) ? ' value="'. e(Input::old('username')) . '"' : ''}}>
                                {{ $errors ->first('username') }}
                                </div>
                            </div> 

                            <div class="form-group">
                                <label for="input_password" class="col-sm-3 control-label text-inverse">Password:</label>
                                <div class="col-sm-6">
                                <input class="form-control" id="input_password" type="password" name="password" placeholder="Password">
                                {{ $errors ->first('password') }}
                                </div>
                            </div> 

                            <div class="form-group">
                                <label for="input_remember_me" class="col-sm-3 control-label text-inverse">Remember Me:</label>
                                <div>
                                    <input type="checkbox" name="input_remember_me" id="input_remember_me">
                                </div>
                            </div>

                        </form>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button submit" class="btn btn-primary" form="login_form">Submit</button>
                    </div>

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

        <script type="text/javascript">
        $(document).ready(function() {
            $('#login_form').bootstrapValidator({
                container: 'tooltip',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {            
                    user_name: {
                        validators: {
                            notEmpty: {
                                message: 'The username is required and cannot be empty'
                            },
                            stringLength: {
                                min: 3,
                                message: 'The username must be more than 3 characters long'
                            },
                            regexp: {
                                regexp: /^[a-zA-Z0-9_]+$/,
                                message: 'The username can only consist of alphabetical, number and underscore'
                            }
                        }
                    },
                    password: {
                        validators: {
                            notEmpty: {
                                message: 'The password is required'
                            },
                            callback: {
                                message: 'The password is not valid',
                                callback: function(value, validator, $field) {
                                    if (value === '') {
                                        return true;
                                    }
                                    // Check the password strength
                                    if (value.length < 7) {
                                        return {valid: false,
                                            message: 'It must be more than 7 characters long'
                                        }
                                    }
                                    // The password doesn't contain any uppercase character
                                    if (value === value.toLowerCase()) {
                                        return {valid: false,
                                            message: 'It must contain at least one upper case character'
                                        }
                                    }
                                    // The password doesn't contain any uppercase character
                                    if (value === value.toUpperCase()) {
                                        return {valid: false,
                                            message: 'It must contain at least one lower case character'
                                        }
                                    }
                                    // The password doesn't contain any digit
                                    if (value.search(/[0-9]/) < 0) {
                                        return {valid: false,
                                            message: 'It must contain at least one digit'
                                        }
                                    }
                                    return true;
                                }
                            }
                        }
                    }
                }
            });

            // i give up!!  The validator is on crack :-)
        //ill try a different version of the validator then :/
        });
        </script>
4

2 回答 2

1

你的代码不对,在head标签中包含所有的js和css文件,并且包含顺序很关键:先包含jquery库,下一个bootstrap,下一个validator插件

<head>
    <!-- <link rel="stylesheet" href="css/Style_sheet.css" type="text/css" /> -->
    <title>The Transformers</title>
    <link rel="icon" href="/title_icon2.jpg">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- // <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> -->


    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="http://getbootstrap.com/assets/js/docs.min.js"></script>

    <link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.1/css/bootstrapValidator.min.css"/>
    <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.1/js/bootstrapValidator.min.js"></script>

</head>

您的html中也有错误

<button type="button submit" class="btn btn-primary" form="login_form">Submit</button>

一定是:

<button type="submit" class="btn btn-primary" form="login_form">Submit</button>

另外,您将来最好注意名称冲突。有关更多详细信息,请参阅:http: //bootstrapvalidator.com/getting-started/#name-conflict

于 2014-09-10T13:06:55.027 回答
0

尝试在表单中包含 modal-footer div。

                <form method="post" class="form-horizontal" id="login_form" action="{{ URL::route('account-login-post') }}" role="form">
                <div class="modal-body form-group">
                    <input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
                    <div class="form-group">
                        <label for="input_email" class="col-sm-3 control-label text-inverse">Username:</label>
                        <div class="col-sm-6">
                        <input class="form-control" id="input_email" type="text" name="user_name" placeholder="Username" {{ (Input::old('username')) ? ' value="'. e(Input::old('username')) . '"' : ''}}>
                        {{ $errors ->first('username') }}
                        </div>
                    </div> 
                    <div class="form-group">
                        <label for="input_password" class="col-sm-3 control-label text-inverse">Password:</label>
                        <div class="col-sm-6">
                        <input class="form-control" id="input_password" type="password" name="password" placeholder="Password">
                        {{ $errors ->first('password') }}
                        </div>
                    </div> 
                    <div class="form-group">
                        <label for="input_remember_me" class="col-sm-3 control-label text-inverse">Remember Me:</label>
                        <div>
                            <input type="checkbox" name="input_remember_me" id="input_remember_me">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary" form="login_form">Submit</button>
                </div>
            </form>
于 2014-09-10T11:22:55.737 回答