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/

（文档）$。就绪（函数（）{

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

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

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

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

在open回调中，您将HTML从隐藏的div复制到表单的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");
            }
        });
    });

});

对话框中的jQuery Validations问题

2 个答案: