javascript - jqueryダイアログフォームでjquery検証を使用する方法

Question

ここSOや他のブログで多くのソリューションを試しましたが、うまくいかないようです。

ここでは、jQuery Validation プラグインと jQuery ui ダイアログを使用しています。

これは私のダイアログです:

$('#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まだテスト中であるため、ルールを に追加しただけであることに注意してください。