jQuery驗證：表單總是有效的問題

Question

我想在提交到服務器之前執行表單驗證。我正在使用jquery.validate插件 （JQuery validation plugin page） 我面臨的問題是，無論我在表單字段中輸入什麼，驗證總是成功，我重複檢查了所有文檔和樣品，並且無法看到爲什麼我正在得到這種行爲。 這種形式是通過加載jquery的AJAX：

$.ajax({ 
    url: "mypage.php", 
    type: "POST", 
    cache: false, 
    success: function(cont){ 
     $("body").append(cont); 
    } 
}); 

在這裏，我告訴你mypage.php代碼

<script src="js/jquery.validate.min.js"></script> 
<script type="text/javascript"> 

$(document).ready(function() { 

    $("#frmParticipante").validate({ 
     rules: { 
      nombre: { required: true } , 
      email: { required: true, email: true }, 
      ci: { required: true} 
     } 
    }); 

    $("#frmParticipante").submit(function(e){ 
     e.preventDefault(); 
     if($(this).valid()){ 
      loadpop("ganaste.php"); 
     } 
    else 
     loadpop("perdiste.php");  

    }); 
}); 


</script> 

<div id="pop_terminaste" class="pop_mensaje ingresardatos animated fadeInDown"> 
    <div id="infopop"> 
     <div id="lady"> <img src="images/terminaste1.jpg" width="453" height="626" /> </div> 
     <div id="dato"> 
      <p class="txt1">¡Terminaste la trivia!</p> 
      <p class="txt2">Ahora solo te falta completar tus datos para conocer el resultado.</p> 
      <p class="txt3">Si ha cargado anteriormente sus datos, ingresar solo su cédula.</p> 
      <form action="" id="frmParticipante" class="form"> 
       <fieldset> 
        <label for="nombre"><img src="images/ico_nombre.png" alt="ico_nombre" /></label> 
        <input type="text" placeholder="Nombre y Apellido" id="nombre"> 
       </fieldset> 
       <fieldset> 
        <label for="email"><img src="images/ico_email.png" alt="ico_email" /></label> 
        <input type="text" placeholder="Email" id="email"> 
       </fieldset> 
       <fieldset> 
        <label for="ci"><img src="images/ico_ci.png" alt="ico_ci" /></label> 
        <input type="text" placeholder="C.I" id="ci"> 
       </fieldset> 
       <p class="msg error">Favor verificar los datos ingresados.</p>     
       <input type="submit" value="VER RESULTADOS" />      
      </form> 
     </div> 
    </div> 
</div> 

感謝

Answer 1

我敢肯定，驗證庫需要name屬性和沒有按」請注意id屬性。你要麼改變你的ID ATTR的姓名，或只加名具有相同屬性值......喜歡：

<input type="text" placeholder="Nombre y Apellido" id="nombre" name="nombre"> 

這裏是一個小提琴表明，它的工作原理http://jsfiddle.net/7WTvL/1/

隨着名字，您可能需要將您的validate.js庫加載到要加載表單的頁面的頭部，然後在ajax請求中的.done（）中運行驗證。

<script> 
$.ajax({ 
    url: "mypage.php", 
    type: "POST", 
    cache: false 
}).done(function(cont) { 
    $("body").append(cont); 
    $("#frmParticipante").validate({ 
     rules: { 
      nombre: { required: true } , 
      email: { required: true, email: true }, 
      ci: { required: true} 
     } 
    }); 
}); 
$("#frmParticipante").submit(function(e){ 
    e.preventDefault(); 
    if($(this).valid()){ 
     loadpop("ganaste.php"); 
    } 
    else 
     loadpop("perdiste.php");  
}); 
</script> 

再次...確保驗證庫加載你ajax'ing內容到......它需要在頁面上ajax'd內容到達之前在頁面上。