彈出框頁面中使用jquery.validate驗證控件

彈出框頁面中使用jquery.validate驗證控件有幾個問題需要解決：

1，彈出框的提交事件完成后如何關閉彈出框頁面？

2，提交不成功如何返回當前頁？

3，如果知道驗證事件成功？

之前筆者都是JS驗證控件，放着強大的jquery.validate控件不用，自己寫驗證，會是讓追求程序完美的人心里有種淡淡的憂傷。

不過還好，今天下午筆者花了點時間，已實現這種功能，雖然也不是很完美，但也基本能用了。

先看下效果，一會再上代碼。

當驗證通過后，程序后台開始提交，提交成功，當前彈出框關閉。

為此代碼如下。

1，打開彈出框。

        function AnswerDialog(id) {
            $.dialog({
                width: '450px',
                height: '500px',
                lock: true, 
                title: '回復提問',
                content: 'url:/VideoManage/QuestionEdit/' + id
            });
        }

2，在彈出框中定義關閉事件。

        var api = frameElement.api, W = api.opener;
        var data = api.data;

3，驗證成功開始執行自定義代碼。

        $(document).ready(function () {
            $("#formLogin").validate({
                event: "keyup",
                success: function () {ok },
                rules: {
                    VideoTitle: { required: true },
                    Answer: { required: true }
                },
                messages: {
                    VideoTitle: { required: '不能為空!' },
                    Answer: { required: '不能為空!' }
                }
            });
        });

4，在ok方法中提交數據庫，如果返回結果正確，關閉當前彈出框。

        function ok() {
            var questionId = $('#QuestionId').val();
            var answer = $('#Answer').val();            
            var isPublic = $('input:radio[name="IsPublic"]:checked').val();

            $.post("/VideoManage/QuestionEditPost", { questionId: questionId, answer: answer, isPublic: isPublic }, function (txt) {
                if (txt == "OK") {
                    api.close();
                }                
            }, "text");           
                      
        }

5，如果返回結果不正確，頁面不會關閉，這時執行后台傳過來的頁面提示框，並跳轉。

return Content("<script>alert('新增失敗，請稍后重試！');window.history.go(-1);</script>", "text/html");

 

至此，大功搞成，各位園友，有更好辦法，歡迎交流。