0

我有如下所示的登录表单，

<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，可能我知道这背后的原因吗？

4

2 回答 2

2

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

$(文档).ready(函数(){

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

于 2013-10-04T07:19:27.983 回答
1

你有几个主要缺陷...

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的表单中。这种技术的主要问题是你现在在同一个页面上有多个元素 with same id。这不仅是无效的 HTML，而且 jQuery Validate 插件将仅适用于 this 的第一个实例，即原始隐藏实例id。删除open回调并将隐藏的附加div到.dialog()如下： $("#formDiv").dialog( ...

3) 您的评论表明您想使用 提交此表格ajax()。如果是这种情况，请使用submitHandlerjQuery Validate 插件的回调函数。 根据文档，这是“在验证后通过 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");
            }
        });
    });

});
于 2013-10-04T16:22:35.697 回答