个人中心
gpt4 book ai didi

javascript - Bootstrap 验证器表单问题

转载 作者：行者123 更新时间：2023-11-28 17:32:26 26 4
gpt4 key购买 nike

下面是我的代码，包括控制表单的模式和 javascript。验证不起作用。它返回是否满足验证要求，但是提交时什么也没有发生。我在另一个文件中有 jquery 和 bootstrap 链接。我正在使用 laravel 4。使用相同验证器的 friend 可以正常工作，但我们代码的执行没有差异。

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

<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>

最佳答案

你的代码不对，在 head 标签中包含所有的 js 和 css 文件，并且包含顺序很关键:首先包含 jquery 库，然后是 bootstrap，然后是验证器的插件

<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

关于javascript - Bootstrap 验证器表单问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25763871/

26 4 0
文章推荐： objective-c - MKPolyline 不会显示
文章推荐： javascript - 根据 JQuery 中是否包含 标记更改 TD 类
文章推荐： ios - 在 Facebook 上分享图片时添加默认句子
文章推荐： ios - iPhone : Error uploading audio wav bytes data to server
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com