对话框形式的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 向用户显示上面的表单，如果没有对话框的表单（即普通 HTML），那么验证在没有任何问题的情况下进行，它的 jsfiddle 但如果我在对话框中显示表单，那么验证没有做它的jsfiddle，我可以知道这背后的原因吗？

Answer 1

试试http://jsfiddle.net/devmgs/WNMfA/12/

$(document).ready(function(){

$("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") 不要在 open 函数中重新创建它。

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 就绪事件中。上面的整个on('click')处理函数都可以去掉。

2) 打开对话框的代码...

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

在open 回调中，将隐藏的div 中的HTML 复制到表单的dialog div 中。这种技术的主要问题是您现在在同一页面上有多个元素具有相同的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");
            }
        });
    });

});