Question

我刚开始使用Bootstrap并且很喜欢它，但我无法弄清楚如何基于成功登录触发模态窗口。表单应设置会话。模式包含确认副本，例如“您确定要继续，等等......”，并带有链接到受保护页面的继续按钮。这两件事分别很好（登录/模态）但我无法弄清楚如何组合它们并仅在成功设置会话后触发模态。

我有一个登录表单......

<form method="post" class="form-signin well">
    <input type="text" id="uname" class="input-block-level" name="uname" placeholder="Username" />
    <input type="password" id="pass" name="pass" class="input-block-level" placeholder="Password" />
    <button class="btn btn-primary" type="submit">Sign in</button>
    <input type="hidden" name="ch" value="login">
    <?php   
        if(isset($_SESSION['login_msg'])){
        echo '<span class="alert alert-error">Login failed. Please try again.</span>';
        unset($_SESSION['login_msg']);
    ?>
</form>

登录脚本......

<?php
session_start();
if(isset($_REQUEST['ch']) && $_REQUEST['ch'] == 'login'){
    if($_REQUEST['uname'] == 'username' && $_REQUEST['pass'] == 'password')
         $_SESSION['login_user'] = 1;
else
         $_SESSION['login_msg'] = 1;
}
if(isset($_REQUEST['index']))
$pagename = $_REQUEST['index'];
if(isset($_REQUEST['ch']) && $_REQUEST['ch'] == 'logout'){
    unset($_SESSION['login_user']);
    header('Location:index.php');
}
if(isset($_SESSION['login_user'])){
if(isset($_REQUEST['index']))
    header('Location:'.$pagename.'.php');
else
    header('Location:protectedpage.php');
}
else{
?>

和我的模型（删除标题以保持简短）...

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-body">
        <p>This site is intended solely for...</p>
    </div>
    <div class="modal-footer">
        <a href="protectedpage.php" class="btn btn-success">Agree to Proceed</a>
    </div>
</div>

我尝试了不同的组合，包括将提交按钮更改为类似的内容......

<a role="button" class="btn btn-primary" type="submit" data-toggle="modal">Sign In</a>

但这不起作用。我错过了什么？

Answer 1

首先，我建议您将按钮类型更改为

登录

然后使用jquery.valition进行验证。如下所示：

 $("#signinForm").validate({

                // Specify the validation rules
                rules: {
                    inputUser: "required",
                    password: {
                        required: true,
                        minlength: 5
                    }
                },


                // Specify the validation error messages
                messages: {
                    inputUser: "Please enter your first name",
                    password: {
                        required: "Please provide a password",
                        minlength: "Your password must be at least 5 characters long"
                    },
                },

                submitHandler: function (form) {

                    form.submit();
                }
            });

通过jquery，你可以在这里看到它有一个sumithandler，所以你可以做任何你喜欢的事情，比如：

$('#signinForm').find("#submit_btn").attr("disabled", true).attr("value",

“提交...”）;

或弹出你喜欢的东西。

成功登录时触发器引导模式确认消息

1 个答案: