Question

我遇到了jQuery Validation的问题，无法验证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;

FYI ：除了动态创建的字段外，表单验证对表单字段工作正常。

如何解决这个问题？

任何建议都将非常感谢..

Answer 1

1）由于jQuery Validate取决于name属性，因此您需要更改PHP以确保每个name都是唯一的。请注意添加到$i属性...

的索引name

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

（您还错过text周围的引号;应为type='text'）

2）动态创建字段时，您可以调用.rules('add') AFTER 来动态创建字段。在你的情况下，这里......

$.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
    });

});

jQuery类名验证不适用于动态生成的文本字段

1 个答案: