Блог

Я столкнулся с проблемой с проверкой jQuery для проверки (динамически) генерируемых текстовых полей ajax…

Вот фрагмент HTML-кода

          <form name="booking" id="booking" method="post" action="">
              <ul>
                <li>
                    <span>Mobile Number</span>
                </li>
                <li>
                <input  type="tel" name="mobile" id="mobile" class='form_mobile'/>
                </li>                    
                   <li>
                    <span>Number of male tickets</span>
                </li>
                <li>
                       <select name="male_qunatity" id="male_qunatity" >

                        </select>
                </li>
            </ul>
        </form>
 

Сценарий проверки Jquery здесь

      $(document).ready(function(){

Here is the ajax call starts

 $('#male_qunatity').change(function() {

        var male_tickets = $(this).val();      
        var mobile = $('#mobile').val();
        var path = '<?php echo site_url() ?>';
        ajaxurl = path   '/wp-admin/admin-ajax.php';
        var data = {
            action: 'get_quantity',
            qty: male_tickets,
            mobile: mobile
        };

          $.post(ajaxurl, data, function(response) {
            $('#m_attendees').html(response);
        });

     }); //END dropdown change event


       $("#booking").validate({
          });

      $('.form_mobile').each(function() {
      $(this).rules('add', {
        required:true,
        number:true,
      messages: {
        required:"Please enter a mobile number",
        number:"Only numbers allowed"
       }
     });
  });

  });//validation ends
 

Вот код ajax для текстовых полей на основе выбранного количества

     $quantity=  $_REQUEST['qty'];
    $mobile=  $_REQUEST['mobile'];
    $pass = "<table>";
      for($i =0; $i<$quantity; $i   ){
    $pass .= "<tr>
       <td>
      <input type='text'  id='mobile-".$i."' class='form_mobile' name='mmobile[]'>
      </td>
          </tr>";
       }
    $pass .= "</table>";
    echo $pass;
 

К вашему сведению: проверка формы работает нормально для полей формы, за исключением динамически создаваемых полей..

Как решить эту проблему?

Любые предложения будут с благодарностью приняты..

1) Поскольку проверка jQuery зависит от name атрибута, вам нужно будет изменить свой PHP, чтобы убедиться, что каждый name из них уникален. Обратите внимание на индекс, $i , добавленный к name атрибуту…

 "... <input type=text  id='mobile-".$i."' name='mmobile[".$i."]' class='form_mobile'> ..."
 

(вы также пропускаете кавычки text ; должно быть type='text' )

2) При динамическом создании полей вы должны вызывать .rules('add') ПОСЛЕ динамического создания полей. В вашем случае, здесь…

 $.post(ajaxurl, data, function(response) {
    $('#m_attendees').html(response);   // <- create the new fields
    $('.form_mobile').each(function() { // <- then dynamically add the rules
        $(this).rules('add', {
            required:true,
            number:true,
            messages: {
                required:"Please enter a mobile number",
                number:"Only numbers allowed"
            }
        });
    });
});
 

3) .validate() является методом инициализации для плагина на вашем form . Просто вызовите его один раз при загрузке DOM. ( .validate() не вызывается повторно при проверке формы, поскольку проверка выполняется автоматически после правильной инициализации плагина.)

 $(document).ready(function() {  // <- DOM is ready

    $("#booking").validate({    // <- initialize plugin on your form
        // your options         // <- plugin options
    });

});