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"); 
      } 
     }); 
    }); 

});