表單不起作用的jQuery驗證

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對象在函數之外被初始化，並且這導致驗證失敗。