jQuery验证以对话框形式发布

我的登录表单如下所示

<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>

电子邮件

Passw

我正在使用

jQuery Dialog

向用户显示上面的表单，如果表单没有对话框（即普通HTML），则验证没有任何问题，但是如果我在对话框中显示表单，则验证没有问题，我可以知道这背后的原因吗？

试试看

$（文档）.ready（函数（）{

使用$（“.formDiv”）不要在open函数中重新创建它。

试试看

$（文档）.ready（函数（）{

---

使用$（“.formDiv”）不要在open函数中重新创建它。

您有几个主要缺陷

1） 调用

.validate（）

的代码

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

不要在

单击
处理程序中调用
.validate（）
，因为它只需要调用一次。
.validate（）
方法不是在表单上调用验证的方法。它只是在表单上初始化插件的方法。因此，就像在工作示例中一样，必须调用
.validate（）
一旦构建表单，通常在DOM就绪事件中。可以删除上面的整个
on（'click'）
处理程序函数

2） 打开对话框的代码

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

在
open
回调中，您可以将隐藏的
div
中的HTML复制到表单的
对话框中。这种技术的主要问题是，同一页面上有多个元素具有相同的
id
。这不仅是无效的HTML，而且jQuery验证插件也是无效的n将只应用于此
id
的第一个实例，即原始隐藏实例。删除
open
回调并将隐藏的
div
附加到
。dialog（）
如下：
$（“#formDiv”）。dialog（…

3） 您的评论表明您希望使用
ajax（）
提交此表单。如果是这种情况，请使用jQuery验证插件的
submitHandler
回调函数。这是“验证表单后通过ajax提交表单的正确位置。”


工作演示：

你有几个主要的缺点

1） 调用
.validate（）
的代码

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

不要在
单击
处理程序中调用
.validate（）
，因为它只需要调用一次。
.validate（）
方法不是在表单上调用验证的方法。它只是在表单上初始化插件的方法。因此，就像在工作示例中一样，必须调用
.validate（）
一旦构建表单，通常在DOM就绪事件中。可以删除上面的整个
on（'click'）
处理程序函数

2） 打开对话框的代码

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

在
open
回调中，您可以将隐藏的
div
中的HTML复制到表单的
对话框中。这种技术的主要问题是，同一页面上有多个元素具有相同的
id
。这不仅是无效的HTML，而且jQuery验证插件也是无效的n将只应用于此
id
的第一个实例，即原始隐藏实例。删除
open
回调并将隐藏的
div
附加到
。dialog（）
如下：
$（“#formDiv”）。dialog（…

3） 您的评论表明您希望使用
ajax（）
提交此表单。如果是这种情况，请使用jQuery验证插件的
submitHandler
回调函数。这是“验证表单后通过ajax提交表单的正确位置。”


工作演示：

离题：“与您编写的代码问题有关的问题必须在问题本身中描述具体问题，并包括重现问题的有效代码。请参阅以获取指导。”~您的jQuery在哪里？离题：“与您编写的代码问题有关的问题必须在问题本身中描述具体问题，并包括重现问题的有效代码。有关指导信息，请参阅。"~z~你的jQuery都在哪里？你说我的问题是离题的，1小时后你给出了一个很长的答案，尽管之前的答案也简单地描述了同样的问题，无论如何，感谢你努力回答我的离题问题。@Mahesh.D，问题中没有显示完整的代码，这完全离题了。从你的JSFID复制你的jQuery代码你说过我的问题是离题的，1小时后你给出了一个很长的答案，尽管之前的答案也简单地描述了相同的内容，无论如何，感谢你努力回答我的离题问题。@Mahesh.D，问题中没有显示完整的代码，这只是离题。从你那里复制你的jQuery代码r jsFiddle到您的OP中，它将成为主题。
$(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");
            }
        });
    });

});