对话框中的jQuery Validations问题

I've login form as shown below,

我的登录表格如下图所示，

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

I'm showing above form to users using jQuery Dialog,if form without dialog box(i,e normal HTML) then validations are doing without any issue its jsfiddle but if I'm showing form in dialog box then validations are not doing its jsfiddle, may I know the reason behind this ?

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

2 个解决方案

#1

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

Use $(".formDiv") dont recreate it inside open function.

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

#2

You have several major flaws...

你有几个主要缺陷......

1) Your code that calls .validate()...

1）您的代码调用.validate（）...

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

Do not call .validate() within a click handler because it only needs to be called one time. The .validate() method is not the method for calling validation on the form. It is only the method for initializing the plugin on the form. So just like in your working example, you must call .validate() as soon as the form is constructed, which is normally within the DOM ready event. The entire on('click') handler function above can be removed.

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

2) Your code that opens the dialog...

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

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

Within your open callback, you duplicate the HTML from a hidden div into your dialog div for the form. The main problem with this technique is that you now have more than one element on the same page with with same id. Not only is this invalid HTML, but the jQuery Validate plugin will only apply to the first instance, the original hidden instance, of this id. Remove the open callback and attach the hidden div to .dialog() like this: $("#formDiv").dialog( ...

在您的开放回调中，您将HTML从隐藏的div复制到表单的对话框div中。这种技术的主要问题是，您现在在同一页面上具有多个具有相同ID的元素。这不仅是无效的HTML，而且jQuery Validate插件仅适用于此id的第一个实例，即原始隐藏实例。删除打开的回调并将隐藏的div附加到.dialog（），如下所示：$（“＃formDiv”）。dialog（...

3) Your comment indicates you want to submit this form with ajax(). If that's the case, use the submitHandler callback function of the jQuery Validate plugin. As per documentation, this is the "right place to submit a form via Ajax after it is validated."

3）您的评论表明您要使用ajax（）提交此表单。如果是这种情况，请使用jQuery Validate插件的submitHandler回调函数。根据文档，这是“经过验证后通过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
    }
});

Working DEMO: http://jsfiddle.net/TRHxZ/

工作演示：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");
            }
        });
    });

});

#1