驗證不適用於填充了Ajax的對話框

Question

我已經嘗試了無數次來自這裏和其他地方的建議，但沒有任何效果，所以請任何人都可以投射爲什麼我的代碼失敗。

由Ajax調用創建的HTML是（該選擇的內容被隱藏，但都是正確地關閉）

<div id="adc" class="ui-dialog-content ui-widget-content" style="display: block; width: auto; min-height: 46px; max-height: none; height: auto;"> 
You must complete fields marked *. 
<br> 
<br> 
<form id="addcont" ;="" autocomplete="off" name="addcont"> 
    <fieldset> 
     Type of contractor/supplier: 
     <select id="otype" name="org_type"> 
      <div id="orgnm" class="hideonload" style="display: block;"> 
       * Full name of organisation: 
       <input id="full_name" class="required" type="text" size="50" value="" name="full_name"> 
       <br> 
       <span id="flagger"></span> 
       <input type="hidden" value="test" name="dbextn"> 
       <input type="hidden" value="1" name="princip"> 
       *Business Group: 
       <br> 
       <select id="bgroup" name="busn_group"> 
        <br> 
        <div id="clasdiv" class="hideonload" style="display: block;"> 
         * Business Class: 
         <select id="bclass" name="busn_clas"> 
         </div> 
         <div id="typediv" class="hideonload" style="display: block;"> 
          <br> 
          <div id="locat" class="hideonload" style="display: block;"> 
           The location you add MUST be that of the master contact address. 
           <br> 
           <table id="loc-add"> 
            <tbody> 
             <tr> 
              <td width="100px"> 
               <strong>Principal address</strong> 
               : 
              </td> 
              <td width="500px"> 
               <select id="loc_type" name="loc_type"> 
               </td> 
              </tr> 
              <tr> 
               <td>Location name:</td> 
               <td> 
                <input id="locat_name" type="text" placeholder="You must give the location a name" size="40" value="" name="locat_name"> 
               </td> 
              </tr> 
              <tr> 
               <td>*Address line1:</td> 
               <td> 
                <input id="address1" class="required" type="text" size="40" value="" name="address1"> 
                <input type="hidden" value="1" name="status"> 
               </td> 
              </tr> 
              <tr> 
               <td>Address line2:</td> 
               <td> 
                <input id="address2" type="text" size="40" value="" name="address2"> 
               </td> 
              </tr> 
              <tr> 
               <td>*Town :</td> 
               <td> 
                <input id="town" class="required" type="text" size="40" value="" name="town"> 
               </td> 
              </tr> 
              <tr> 
               <td>*Postcode:</td> 
               <td> 
                <input id="postcode" class="required" type="text" size="10" value="" name="postcode"> 
               </td> 
              </tr> 
              <tr> 
               <td>County:</td> 
               <td> 
                <select name="county"> 
                </td> 
               </tr> 
               <tr> 
                <td> Country:</td> 
                <td> 
                 <select id="country" name="country"> 
                 </td> 
                </tr> 
                <tr> 
                 <td>*Phone no:</td> 
                 <td> 
                  <input id="phone" class="required" type="text" size="15" value="" name="phone"> 
                  <br> 
                 </td> 
                </tr> 
               </tbody> 
              </table> 
              <br> 
             </div> 
            </div> 
           </fieldset> 
          </form> 
         </div> 

我可以從螢火蟲看到，包括驗證器核心庫被加載。

我的jQuery腳本是：

$(document).ready(function(){ 
$('.nextbut').hide(); 
$(document).on('click','a.addcontr', function (e) { 
    e.preventDefault(); 
    var organid=$('#basinf').attr("parn"); 
    var usrd = $('#basinf').attr("pare"); 
    var dbextn = $('#basinf').attr("dbextn"); 
    var parf = $('#basinf').attr("parf"); 
    var $tag = $("<div id='adc'><img src='images/loading.gif'></div>"); 
    $.post("ajax/createContractor.php", 
    {organid: organid, dbextn: dbextn, parf: parf}, 
    function(data) { 
     $tag.html(data).dialog({autoOpen: false, title: "Adding a contractor", 
      width: 540, 
      modal: true, 
      buttons: { 
       "Add Contractor" : function() { $('#addcont').validate({debug: true , 
        rules:{ 
         full_name: "required", 
         locat_name: "required", 
         address1:"required", 
         town:"required", 
         postcode:"required" 
        }, 
        messages: { 
         full_name: " Enter name of organisation", 
         locat_name: " Enter location name", 
         address1: " Enter address", 
         town: " Enter town or city", 
        postcode: " Enter postcode"}, 
        submitHandler:function(){$.post("ajax/insContractor.php",$('#addcont').serialize(),function(data){ 
         $('#adc').dialog("close");});} 
       }); 

       }, 
       "Cancel": function() { 
        $(this).dialog("close"); 
       } 
      }, 
      close: function() {$('#addcont').remove(); 
       $('#adc').remove(); 
      }}).dialog('open'); 

    });$('#addcont').validate(); 
}); 
}); 

我試圖把調用validate無處不在，包括通過開放：

function(event, ui){$('#addcont').validate();}, just after modal: true, 

Answer 1

我看到你打電話$('#addcont').validate(...)兩次。您不能多次調用它。

• 的.validate()方法僅供形式初始化插件。 .validate()方法是你放置選項的地方。您不能多次呼叫它，因此您無法通過再次調用它來添加，覆蓋或刪除選項。後續的呼叫被忽略。

• 當您撥打.validate()窗體的HTML 必須已經存在。在大多數情況下，它在DOM就緒事件處理程序中調用。在表單被動態創建的情況下，在表單的HTML被創建後立即調用表單。

否則，我會依靠你來構建一個jsFiddle來重現問題，以便我們檢查和排除故障。

1. 觸發你的ajax在對話框中創建表單。

2. HTML完全構建後，請調用.validate()方法以及選項。在你的代碼

尋找再次，你需要徹底刪除您buttons:選項裏面的.validate()方法。由於validate插件會自動捕獲提交按鈕，因此您不需要做任何特殊的事情。

簡單地將刪除的.validate()中的驗證規則和選項複製到最後的.validate()方法中。

Answer 2

有很多關於創建表單和使用parent（）和appendTo（）在DOM中移動對話框的建議，但最終我回到了plugin page並決定離開驗證聲明並觸發對話框按鈕，但以編程方式進行。

我設置了一個變量，其中包含要檢查的表單ID，然後是if語句，如果驗證成功，則發送表單。無論它在DOM中存在，它都能以某種方式工作，所以一個快樂的兔子。至少我能理解發生了什麼事！

$(document).ready(function(){ 
$(document).on('click','a.addcontr', function (e) { 
    e.preventDefault(); 
    var organid=$('#basinf').attr("parn"); 
    var usrd = $('#basinf').attr("pare"); 
    var dbextn = $('#basinf').attr("dbextn"); 
    var parf = $('#basinf').attr("parf"); 
    var $tag = $("<div id='adc'><img src='images/loading.gif'></div>"); 
    $.post("ajax/createContractor.php", 
    {organid: organid, dbextn: dbextn, parf: parf}, 
    function(data) { 
     $tag.html(data).dialog({ 
      autoOpen: false, title: "Adding a contractor", 
      width: 540, 
      modal: true, 
      buttons: { 
       "Add Contractor" : function() { 
        var validator=$('#addcont').validate({ 
         rules:{ 
          full_name: "required", 
          locat_name: "required", 
          address1:"required", 
          town:"required", 
          postcode:"required" 
         }, 
         messages: { 
          full_name: " Enter name of organisation", 
          locat_name: " Enter location name", 
          address1: " Enter address", 
          town: " Enter town or city", 
         postcode: " Enter postcode"} 
        }); 
        if(validator.form()){$.post("ajax/insContractor.php",$('#addcont').serialize(),function(data){ 
         $('#adc').dialog("close"); 
        });} 

       }, 
       "Cancel": function() { 
        $(this).dialog("close"); 
       } 
      }, 
      close: function() {$('#addcont').remove(); 
       $('#adc').remove(); 
      }, 
     }).dialog('open'); 

    }); 
}); 

}）;