jQuery的驗證問題

Question

我登錄表單，如下圖所示，

<a href="#" id="loginLink">click Here to Log in</a> 
<div class="formDiv" id="formDiv"> 
<form name="loginForm" id="loginForm" action="#"> 
    <label>Email</label><input type="text" name="email" id="email"><br/> 
    <label>Passw</label><input type="password" name="pwd" id="pwd"><br/> 
    <input type="submit" value="Log in" id="loginbtn" name="loginbtn"> 
</form> 
</div> 

我上面顯示的形式給用戶使用jQuery Dialog，如果沒有表格對話框（I，E普通的HTML），則驗證沒有任何問題jsfiddle，但如果我在對話框中顯示錶單，則驗證沒有執行jsfiddle，我可否知道背後的原因？

Answer 1

嘗試http://jsfiddle.net/devmgs/WNMfA/12/

$（文件）。就緒（函數（）{

$("a#loginLink").on("click",function(e){ 
    e.preventDefault(); 

    $(".formDiv").dialog({ 
      closeOnEscape: false, 
      title:"Login Form", 
      modal: true, 
      resizable: false, 
      width:'350px', 
      position:'fixed', 

      close:function() 
      {      
       $(".ui-dialog-content").dialog("close"); 
      } 
     }); 
}); 

使用$（ 「formDiv」）不重新打開它函數內部。

Answer 2

你有幾個主要缺陷...

1）您的代碼稱爲.validate() ...

$(document).on("click", '#loginbtn', function(e){ 
    e.preventDefault(); 
    $("#loginForm").validate();   
    alert('test'); 
    //I want to do Ajax stuff 
}); 

請勿在click處理程序中調用.validate()，因爲它只需要調用一次。 .validate()方法不是在窗體上調用驗證的方法。這只是初始化表單上的插件的方法。因此，就像在您的工作示例中一樣，您必須在窗體構建完成後立即調用.validate()，這通常在DOM ready事件中。上面的整個on('click')處理函數都可以被刪除。

2）打開的對話框中您的代碼...

open:function(){     
    $(this).html($("#formDiv").html()); 
}, 

在您open回調，您複製從隱藏div HTML到您的dialogdiv的形式。這種技術的主要問題是，您現在在同一頁面上有多個元素，並且具有相同的id。這不僅是無效的HTML，而且jQuery Validate插件只適用於這個id的第一個實例，即原始的隱藏實例。取出open回調並附加隱藏div到.dialog()這樣的：$("#formDiv").dialog(...

3）您的評論表示您要提交此表格ajax()。如果是這種情況，請使用jQuery Validate插件的submitHandler回調函數。 As per documentation，這是「在經過驗證後通過Ajax提交表單的正確位置」。

$("#loginForm").validate({ // initialize the plugin 
    submitHandler: function (form) { 
     // your ajax here;    // submit the data 
     $("#formDiv").dialog("close"); // close the dialog 
     alert('submitted with ajax'); // for demo 
     return false;     // prevent regular form submit action 
    } 
}); 

---

工作演示：http://jsfiddle.net/TRHxZ/

$(document).ready(function() { 

    $("#loginForm").validate({ // initialize the plugin 
     submitHandler: function (form) { 
      // your ajax here;    // submit the data 
      $("#formDiv").dialog("close"); // close the dialog 
      return false;     // prevent regular form submit action 
     } 
    }); 

    $("a#loginLink").on("click", function (e) { 
     e.preventDefault(); 

     $("#formDiv").dialog({ 
      closeOnEscape: false, 
      title: "Login Form", 
      modal: true, 
      resizable: false, 
      width: '350px', 
      position: 'fixed', 
      close: function() { 
       $(".ui-dialog-content").dialog("close"); 
      } 
     }); 
    }); 

});