Jquery 验证插件在第二次打开 jquery 对话框时不起作用

Question

我目前正在使用 jquery validate 插件来验证我在 jquery 对话框中的动态字段。

当我第一次打开对话框并提交表单时一切正常，但是当我第二次打开它时验证没有发生。

谁能建议我哪里做错了？我尝试使用以下代码：

$("#regdialog").append("<caption><u><font size='5'>Patient Registration</font></u></caption>");
                                   $("#regdialog").append("<br/>");
                            $("#regdialog")
                            .append($('<tr width="20%"/>').append($('<td align=left/>').html('<label for="firstname">'+r[0]+'</label>'))
                                .append($('<td align=left/>').html('<input type="text" id="firstname" name="firstname" />'))
                                .append($('<td align=left/>').html("<input type=hidden value='"+ r1[0]+ "'/>"))
                                    .append($('<td align=left/>').html('<label for="middlename">'+r[1]+'</label>'))
                                    .append($('<td align=left/>').html('<input  type="text" id="middlename" name="middlename" />'))
                                    .append($('<td align=left/>').html("<input type=hidden value='"+ r1[1]+ "' class=grades/>")));

                                    $("#regdialog")
                            .append($('<tr width="20%"/>').append($('<td align=left/>').html('<label for="lastname">'+r[2]+'</label>'))
                                    .append($('<td align=left/>').html('<input type="text" id="lastname" name="lastname"/>'))
                                    .append($('<td align=left/>').html("<input type=hidden value='"+ r1[2]+ "' class=grades/>"))
                                    .append($('<td align=left/>').html('<label for="patientId">'+r[3]+'</label>'))
                                    .append($('<td align=left/>').html('<input type="text"  id="patientId" name="patientId" />'))
                                    .append($('<td align=left/>').html("<input type=hidden value='"+ r1[3]+ "' class=grades/>")));

                                    $("#regdialog")
                            .append($('<tr width="20%"/>').append($('<td align=left/>').html('<label for="dateofbirth">'+r[4]+'</label>'))
                                    .append($('<td align=left/>').html('<input type="text" readonly="true" id="dateofbirth" name="dateofbirth" />'))
                                    .append($('<td align=left/>').html("<input type=hidden value='"+ r1[4]+ "' class=grades/>"))
                                    .append($('<td align=left/>').html('<label for="aadharNo">'+r[5]+'</label>'))
                                    .append($('<td align=left/>').html('<input type="text" id="aadharNo" name="aadharNo"/>'))
                                    .append($('<td align=left/>').html("<input type=hidden value='"+ r1[5]+ "' class=grades/>")));
                                    $("#dateofbirth").datepicker({dateFormat:"dd-M-yy",changeYear: true,changeMonth: true,maxDate: '@maxDate'});

                                    $("#regdialog")
                            .append($('<tr width="20%"/>').append($('<td align=left/>').html('<label for="dateofreg">'+r[6]+'</label>'))
                                    .append($('<td align=left/>').html('<input type="text" readonly="true" id="dateofreg" name="dateofreg"/>'))
                                    .append($('<td align=left/>').html("<input type=hidden value='"+ r1[6]+ "' class=grades/>"))

                                    .append($('<td align=left/>').html('<label for="email">'+r[7]+'</label>'))
                                    .append($('<td align=left/>').html('<input type="text" id="email" name="email" />'))
                                    .append($('<td align=left/>').html("<input type=hidden value='"+ r1[7]+ "' class=grades/>")));
                                    $("#dateofreg").datepicker({dateFormat:"dd-M-yy",changeMonth: true,changeYear: true,maxDate: '@maxDate',minDate: '@minDate'});


                                    $("#regdialog")
                            .append($('<tr width="20%"/>').append($('<td align=left/>').html('<label for="primaryPhno">'+r[8]+'</label>'))
                                    .append($('<td align=left/>').html('<input type="text" id="primaryPhno" name="primaryPhno"/>'))
                                    .append($('<td align=left/>').html("<input type=hidden value='"+ r1[8]+ "' class=grades/>"))
                                    .append($('<td align=left/>').html('<label for="secondaryPhno">'+r[9]+'</label>'))
                                    .append($('<td align=left/>').html('<input type="text" id="secondaryPhno" name="secondaryPhno"/>'))
                                    .append($('<td align=left/>').html("<input type=hidden value='"+ r1[9]+ "' class=grades/>")));


$("#regdialog").dialog({
    autoOpen : true,
    height : 600,
    width : 1000,
    modal: true,
    resizable: true,
    draggable:false,
    closeOnEscape: true,
    destroyOnClose: false,
    autoResize:false,
      show: {
            effect: "drop",
            direction: "up",
            easing: "easeInQuad",
            duration: 175
          },
          hide: {
            effect: "drop",
            direction: "up",
            easing: "easeOutQuad",
            duration: 175
          },
    open: function (type, data) {
        $(this).wrap("<form  class=\"cmxform\" id=\"registrationform\" action=\"./\"><fieldset class='ui-widget ui-widget-content ui-corner-all'></fieldset></form>");
        validator=$('#registrationform').validate({
            rules: {
                firstname: "required",
                email: {
                    required: true,
                    email: true
                },
                patientId:{
                    required: true,
                    digits:true
                },
                primaryPhno:{
                     required: true,
                     number: true,
                     maxlength: 10

                },
                aadharNo:{
                    required: true,
                     number: true,
                     minlength: 16,
                    maxlength: 16
                },
                comments: {
                    required: true,
                    minlength: 10,
                    maxlength: 1000
                },

            },
            messages: {
                firstname: "Please enter your firstname",
                email: "Please enter a valid email address",
                patientId:{
                    required:"Please enter patientId",
                },
                primaryPhno:{
                     required: "PhoneNumber required",
                     maxlength: "Must be {0} characters"

                },
                aadharNo:{
                    required: "AadharNumber required",
                    minlength: "Must be {0} characters",
                     maxlength: "Not more than {0} characters"
                },

                comments: {
                        required: "Required Comments",
                        minlength: "Must be at least {0} characters",
                        maxlength: "Must be less than {0} characters"
                    },
            },

                });

    },
    close: function(event, ui) {
        $(this).unwrap();
         validator.resetForm();


    },
    buttons : 
        [{
                id: "button-ok",
                text: "Submit",
                Class:"submit",
                type:"submit",
                click: 
         function() {
                       alert($("#registrationform").valid())
                         if($("#registrationform").valid())
                      {
                         $(":button:contains('Submit')").prop("disabled", true).addClass("ui-state-disabled");
                         savepatient();
                      }
                     return false;
                  }
            },
            {
                id: "button-cancel",
                text: "Cancel",
                click: 
        function() {
                    $(this).unwrap();
                    validator.resetForm();
                    $(this).dialog("close");



                   }
        }]

});

Answer 1

.validate() 方法用于初始化表单上的插件；相关部分是您只能在任何特定元素上调用它一次。如果您在特定元素上多次调用它，则所有后续调用都将被忽略。

在您的 open 选项中，您正在创建表单...

$(this).wrap("<form  class=\"cmxform\" id=\"registrationform\" ...

然后在您的 close 选项中，您实际上是在破坏表单...

$(this).unwrap();

我建议您重新考虑有关动态包装和展开的整个方法，因为我相信该插件在第一次销毁后会失去对 form 的跟踪。

不清楚为什么您认为有必要使用form 标签进行包装/解包。但是，只需将 <form> 标记一直留在原处，并且只在 DOM 就绪时调用 .validate() 一次。