Проблема проверки jQuery в диалоговой форме

TRy 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") и не создавайте его внутри открытой функции.

У вас есть несколько серьезных недостатков...

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 в свой div dialog для формы. Основная проблема с этим методом заключается в том, что теперь у вас есть более одного элемента на одной странице с одним и тем же id. Этот недействительный HTML не только HTML, но плагин jQuery Validate применим только к первому экземпляру - исходному скрытому экземпляру этого id. Удалите open обратный вызов и прикрепите скрытый div к .dialog() следующим образом: $("#formDiv").dialog(...

3) В вашем комментарии указано, что вы хотите отправить эту форму с помощью ajax(). В этом случае используйте submitHandler обратного вызова submitHandler плагина jQuery 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");
            }
        });
    });

});