如何在jquery对话框窗体上使用jquery验证

时间:2012-08-02 09:14:48

标签: javascript jquery jquery-ui

我已经在SO和其他博客中尝试了很多解决方案,但我似乎无法做到这一点。

我在这里使用jQuery Validation插件和jQuery ui Dialog。

这是我的对话:

$('#dialog_update').dialog({
        autoOpen: false,
        modal: true,
        width: 600,
        height: 540,
        resizable: false,
        draggable: false,
        buttons: {
            Cancel: function() {
                $( this ).dialog( "close" );
            },
            "Save": function() {
                    $("#dialog_update").submit();
                    $.ajax({
                        url: site_url + "/consultation/update/" + $("#r_id").attr("data"),
                        type: "POST",
                        data: {
                            'date'           : $("#date").val(),
                            'service_type'   : $("#service_type").val(),
                            'new_revisit'    : $("#new_revisit").val(),
                            'admission'      : $("#admission").val(),
                            'emergency'      : $("#emergency").val(),
                            'indigent'       : $("#indigent").val(),
                            'philhealth'     : $("#philhealth").val(),
                            'height'         : $("#height").val(),
                            'height_type'    : $("#height_type").val(),
                            'weight'         : $("#weight").val(),
                            'weight_type'    : $("#weight_type").val(),
                            'bp'             : $("#bp").val(),
                            'chief_complaint': $("#chief_complaint").val(),
                            'diagnosis'      : $("#diagnosis").val(),
                            'medication'     : $("#medication").val(),
                            'remarks'        : $("#remarks").val(),
                            'pid'            : id
                        },
                        dataType: "html",
                        success: function(data) {
                            obj = JSON && JSON.parse(data) || $.parseJSON(data);
                            window.location = obj.url + "/" + obj.id;                            
                        }
                    });                    
            }
        }
    });

我的验证员:

 $("#dialog_update").validate({
        errorContainer: "#errorblock-div1, #errorblock-div2",
        errorLabelContainer: "#errorblock-div2 ul",
        wrapper: "li",
        rules: {
            date: "required"    
        },
        messages: {
            date: "Please enter a date."
        },
        submitHandler: function(form) {
        jQuery(form).ajaxSubmit({
            target: '#client-script-return-data',
            success: function() {
            $('#my-modal-form').dialog('close');
            successEvents('#client-script-return-msg');
            }
        });
        }
    });

打开对话框:

$(".update").click(function() {
        var r_id = $(this).attr('data');
        $("#dialog_update")
            .load(site_url + '/consultation/update_form/' + r_id, createDatepicker)
            .dialog('open');
    });

我无法进行验证工作。在某些时候,它会在“设置”上抛出错误,表示未捕获的类型错误。 此外,该对话框还有一个日期选择器。

编辑更多信息: 使用的插件:bassistance.de/jquery-plugins/jquery-plugin-validation/ 错误:Uncaught TypeError: Cannot read property 'settings' of undefined

此外,单击Save按钮时会出现该错误。当错误显示时,日期选择器将不再关闭。请注意,我只在date添加了规则,因为我还在测试它。

0 个答案:

没有答案