Question

我正在使用bootstrap进行注册页面我使用http://bootstrapvalidator.com/插件来验证我的表单。所有验证都已完成但是当我点击提交按钮时它会被禁用，数据不会被发送到下一个php文件，请帮帮我，我的代码如下。 HTML代码

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="bootstrap/css/bootstrapValidator.min.css"/>
    <script type="text/javascript" src="bootstrap/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <!-- Either use the compressed version (recommended in the production site) -->
    <script type="text/javascript" src="bootstrap/js/bootstrapValidator.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
$('#signupbox').bootstrapValidator({
live: 'enabled',
    message: 'This value is not valid',
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        firstName: {
            validators: {
                notEmpty: {
                    message: ' '
                },
                stringLength: {
                    min: 2,
                    max: 30,
                    message: ' '
                },
                regexp: {
                    regexp: /^[a-zA-Z ]+$/,
                    message: ' '
                }
            }
        },
        lastName: {
            validators: {
                notEmpty: {
                    message: ' '
                },
                stringLength: {
                    min: 3,
                    max: 30,
                    message: ' '
                },
                regexp: {
                    regexp: /^[a-zA-Z ]+$/,
                    message: ' '
                }
            }
        },

        email: {
            validators: {
             notEmpty: {
                    message: ' '
                },
                emailAddress: {
                    message: 'The input is not a valid email address'
                },
                 regexp: {
                    regexp: /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i,
                    message: ' '
                }
            }
        },
        password: {
            validators: {
                notEmpty: {
                    message: 'The password is required and cannot be empty'
                },


            }
        },
        confirmPassword: {
            validators: {
                notEmpty: {
                    message: 'The confirm password is required and cannot be empty'
                },
                identical: {
                    field: 'password',
                    message: ' '
                }

            }
        }


    }

});

// Validate the form manually
});


</script>



</head>

<body>



    <div id="signupbox" style="margin-top:50px;" class="mainbox col-md-4 col-md-offset-4 col-sm-1 col-sm-offset-3">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <div class="panel-title">Sign Up</div>
                        <div style="float:right; font-size: 85%; position: relative; top:-15px"><a id="signinlink" href="login.php">Sign In</a></div>
                    </div>  
                    <div class="panel-body" >
                        <form id="signupform" class="form-horizontal" action="submit.php" method="GET" role="form" >

                            <div id="signupalert" style="display:none" class="alert alert-danger">
                                <p>Error:</p>
                                <span></span>
                            </div>

                             <div class="form-group">

                        <div class="col-lg-6">
                            <input type="text" class="form-control" name="firstName" placeholder="First name" />
                        </div>
                        <div class="col-lg-6">
                            <input type="text" class="form-control" name="lastName" placeholder="Last name" />
                        </div>
                    </div>





                            <div class="form-group has-feedback">

                                <div class="col-md-12">
                                    <input type="text" class="form-control" name="email" placeholder="Email Address">
                                </div>
                            </div>

                            <div class="form-group">

                                <div class="col-md-12">
                                    <input type="date" class="form-control" name="bday" placeholder="Date of Birth">
                                </div>
                            </div>

                            <div class="form-group">
                               <div class="col-md-12">
                                    <input type="password" class="form-control" name="password" placeholder="Password">
                                </div>
                            </div>

                              <div class="form-group">
                               <div class="col-md-12">
                                    <input type="password" class="form-control" name="confirmPassword" placeholder="Confirm Password">
                                </div>
                            </div>




                            <div class="form-group">
                                <!-- Button -->                                        
                                <div class="col-md-offset-0 col-md-9">
                                    <input type="submit" id="submit" style="float:left;" class="btn btn-info" value="Signup">


                                </div>
                            </div>





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




     </div> 




</body>

Answer 1

在您的表单页面中，您使用method="GET"方法传递数据。

<form id="signupform" class="form-horizontal" action="submit.php" method="GET" role="form" >

尝试使用method="POST"并查看其是否有效。

 <form id="signupform" class="form-horizontal" action="submit.php" method="POST" role="form" >

Answer 2

您的问题是，您使用提交作为提交按钮的ID。

例如，您无法在验证后提交表单是否使用提交作为ID或命名提交按钮：

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

或者

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

将提交按钮的ID更改为其他内容将解决问题。

请参阅官方文档中的the name conflict warning。

单击bootstrap 3时，“提交”按钮被禁用，数据未发送到数据库

2 个答案: