Подтверждение не работает для диалога, заполненного Ajax

Question

Я пробовал бесчисленные предложения отсюда и в другом месте, но ничего не работает, поэтому, пожалуйста, кто-нибудь может рассказать, почему мой код не работает.

HTML, созданный при вызове Ajax является (содержание выбирает скрыто, но все правильно замкнутые)

<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> 

Я могу видеть из Firebug, что основные библиотеки, включая валидатор загружается.

Мой 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 ready. В тех случаях, когда формы динамически создаются, он вызывается сразу после HTML для создания формы.

В противном случае, я буду полагаться на вас, чтобы построить jsFiddle, воспроизводящий этот вопрос, так что у нас есть что-то проверять и устранять неполадки.

1. Запустите свой аякс, чтобы создать форму в диалоговом окне.

2. После того, как HTML полностью построен, затем вызовите метод .validate() вместе с параметрами.

Глядя на ваш код еще раз, вам необходимо полностью удалить метод .validate() внутри вашего buttons: варианта. Поскольку плагин validate автоматически захватывает кнопку отправки, вам не нужно делать ничего особенного.

Просто скопируйте правила проверки и параметры из вашего удаленного .validate() в метод .validate() в конце.

Answer 2

Существует множество предложений по созданию форм «на лету» и смещению диалога внутри DOM с родительским() и appendTo(), но в конце я вернулся к plugin page и решил оставить объявление проверки и запустить его в кнопку диалога, но делать это программно.

Я установил переменную с проверяемым идентификатором формы, затем оператор 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'); 

    }); 
}); 

});