Question

我是jQuery的新手，我正在尝试使用它来验证登录表单。但是，验证脚本不会激活：它只是在那里无所事事，同时禁用提交按钮。我认为它干扰了在同一表单上运行的另一个脚本，它允许用户在同一个div中的不同表单之间切换。

这是html：

<div class="box">
    <?php if (isset($_SESSION['login'])){ ?>
        <h2>Welcome back, <?php echo $_SESSION['username']; ?></h2>
        <div><p><a href="logout.php">Click here to log outt</a></p></div>
    <?php } else { ?>
        <div id="form_wrapper" class="form_wrapper">
            <div class="register"> <!-- First form -->
            <form id="registrationform">
        <h2>Register</h2>
        <div class="box">
           <div>
               <label>Name:</label>
               <input name="nomeagenzia" type="text" required />
               </div>
           <!-- Some other input fields -->
               <input type="submit" value="Register" />
           <a href="#" rel="login" class="linkform">Already a user? Login here</a>
        </div>
        </form>
        </div>

        <div class="login active"> <!-- Second form, the one I'm validating-->
        <form id="loginform" action="index.php" method="POST">
        <h2>Area Agenzie</h2>
        <div class="box">
        <div>
            <label>Username:</label>
        <input name="username" type="text" />
        </div>
        <div style="position:relative;">
            <label>Password:</label>
                <a href="#" rel="forgot_password" class="linkform" style="right:0; position:absolute; margin-right:3px;">Forgot your password?</a>
            <input name="password" type="password" />
        </div>
    <input name="submit" type="submit" value="Login" />
        <a href="#" rel="register" class="linkform">Register here!</a>
        </div>
        </form>
        </div>
        <!-- There's a third form I omitted -->                 
        </div>
    <?php } ?>
</div>

以下是在表单之间切换的javascript：

$(function() {
    var $form_wrapper = $('#form_wrapper'),
    $currentForm = $form_wrapper.children('div.active'),
    $linkform = $form_wrapper.find('.linkform');

    $form_wrapper.children('div').each(function(i){
        var $theForm = $(this);
        if(!$theForm.hasClass('active'))
        $theForm.hide();
        $theForm.data({
            width : $theForm.width(),
            height : $theForm.height()
        });
    });
    setWrapperWidth();

    $linkform.bind('click',function(e){
        var $link = $(this);
        var target = $link.attr('rel');
        $currentForm.fadeOut(100,function(){
            $currentForm.removeClass('active');
            $currentForm= $form_wrapper.children('div.'+target);
            $form_wrapper.stop()
                .animate({
                    width : $currentForm.data('width') + 'px',
                    height : $currentForm.data('height') + 'px'
                },225,function(){
                    $currentForm.addClass('active');
                    $currentForm.fadeIn(100);
            });
        });
        e.preventDefault();
    });

    function setWrapperWidth(){
        $form_wrapper.css({
            width : $currentForm.data('width') + 'px',
            height : $currentForm.data('height') + 'px'
        });
    }
});

这是验证脚本：

$(document).ready(function()
{  
    $("#loginform").validate(  
    {  
        rules:{  
        'username':{  
            required: true,
            remote:{  
                url: "php/validatorAJAX.php",  
                type: "post"  
                }  
            },  
        'password':{  
            required: true  
            }  
        },  
        messages:{  
        'username':{  
            required: "Il campo username è obbligatorio!",
            remote: "L'username non esiste!" 
            },  
        'password':{  
            required: "Il campo password è obbligatorio!"  
            }  
        },
        submitHandler: function(form){
        if($(form).valid())
            form.submit();  
        return false;
        }           
    });
});

最后，这是验证脚本中包含的validatorAJAX.php：

<?php
$mysqli = new mysqlc();
function usernameExists($username){
    $username = trim($username);
    $stmt = $mysqli->prepare("SELECT COUNT(*) AS num FROM utenti WHERE username= ?");
    $stmt->bind_param("s", $username);
    $stmt->execute();
    $stmt->bind_result($result);
    $result = (bool)$stmt->fetch();
    $stmt->close();
    return $result;
}

if(isset($_POST['username'])){
    if(usernameExists($_POST['username'])){
        echo 'true';
    }else{
        echo 'false';
    }
}
?>

您可以在http://pansepol.com/NEW测试脚本，当您点击login_form上的“提交”时，您将看到没有任何反应。而且，不进行任何验证。我在这里疯了：）

Answer 1

我修复了它：validatorAJAX.php出现问题，导致整个表单崩溃。基本上mysqli对象在函数外部初始化，这导致验证失败。

表单上的jQuery验证不起作用

1 个答案: