javascript - jQuery 验证 - 无法读取动态表单上未定义的属性 'settings'

Question

我使用的是Wordpress，但这道题实际上是一个Jquery验证。

HTML 部分(此部分使用不同的 id 重复)

<div class="product-col" id="row-4016">
  <div class="sync-prod-image"><img src="image1.jpg"></div>
  <div class="product-meta">
    <div class="poster-table" border="0" width="100%">
      <form action="" id="meta-form-43825" class="poster-meta-form" novalidate="novalidate">
        <div class="size-11x17 poster-tr meta-4018 meta-row-wrap">
          <div width="15%"><span>11x17<input type="hidden" name="base_amount" id="base_amount-4018" value="8"></span></div>
          <input type="hidden" value="43826" class="meta_price_id" id="poster_price-4018" name="poster_price-4018">
          <div width="15%"><span>8.00<input type="hidden" class="base-price" name="base_price" id="base_price-4018" value="8.00"></span></div>
          <div width="15%"><span><input type="number" class="size-sale-price tooltipstered" id="reg_price_4018" name="reg_price_4018" value="9.00" min="8" step="0.01" target="4018"></span></div>
          <div width="15%">
            <span id="profit-4018" class="profit-tag">1.00</span>
            <input type="hidden" name="meta_target" id="meta_target-4018" value="43827">
          </div>
          <div width="40%">
            <input type="hidden" name="meta_price_id" value="43826">
            <input type="hidden" name="regular_price_id" value="43827">
            <input type="hidden" name="sale_price" value="9">
            <input type="hidden" name="base_price" value="8">
            <input type="submit" id="meta-submit-43827" name="meta-submit-43827" value="Update">
            <img src="bx_loader.gif" alt="Processing Poster Update" id="loading-4018" class="loading">
            <img src="success.png" alt="Poster Update Success" id="success-4018" class="success">
            <img src="error.png" alt="Poster Update Success" id="error-4018" class="error">
          </div>
        </div>
      </form>
      <form action="" id="meta-form-43832" class="poster-meta-form" novalidate="novalidate">
        <div class="size-16x24 poster-tr meta-4019 meta-row-wrap">
          <div width="15%"><span>16x24<input type="hidden" name="base_amount" id="base_amount-4019" value="9"></span></div>
          <input type="hidden" value="43833" class="meta_price_id" id="poster_price-4019" name="poster_price-4019">
          <div width="15%"><span>9.00<input type="hidden" class="base-price" name="base_price" id="base_price-4019" value="9.00"></span></div>
          <div width="15%"><span><input type="number" class="size-sale-price tooltipstered" id="reg_price_4019" name="reg_price_4019" value="9.00" min="9" step="0.01" target="4019"></span></div>
          <div width="15%">
            <span id="profit-4019" class="profit-tag">0.00</span>
            <input type="hidden" name="meta_target" id="meta_target-4019" value="43834">
          </div>
          <div width="40%">
            <input type="hidden" name="meta_price_id" value="43833">
            <input type="hidden" name="regular_price_id" value="43834">
            <input type="hidden" name="sale_price" value="9">
            <input type="hidden" name="base_price" value="9">
            <input type="submit" id="meta-submit-43834" name="meta-submit-43834" value="Update">
            <img src="bx_loader.gif" alt="Processing Poster Update" id="loading-4019" class="loading">
            <img src="success.png" alt="Poster Update Success" id="success-4019" class="success">
            <img src="error.png" alt="Poster Update Success" id="error-4019" class="error">
          </div>
        </div>
      </form>
      <form action="" id="meta-form-43839" class="poster-meta-form" novalidate="novalidate">
        <div class="size-24x36 poster-tr meta-4020 meta-row-wrap">
          <div width="15%"><span>24x36<input type="hidden" name="base_amount" id="base_amount-4020" value="12"></span></div>
          <input type="hidden" value="43840" class="meta_price_id" id="poster_price-4020" name="poster_price-4020">
          <div width="15%"><span>12.00<input type="hidden" class="base-price" name="base_price" id="base_price-4020" value="12.00"></span></div>
          <div width="15%"><span><input type="number" class="size-sale-price tooltipstered" id="reg_price_4020" name="reg_price_4020" value="14.00" min="12" step="0.01" target="4020"></span></div>
          <div width="15%">
            <span id="profit-4020" class="profit-tag">2.00</span>
            <input type="hidden" name="meta_target" id="meta_target-4020" value="43841">
          </div>
          <div width="40%">
            <input type="hidden" name="meta_price_id" value="43840">
            <input type="hidden" name="regular_price_id" value="43841">
            <input type="hidden" name="sale_price" value="14">
            <input type="hidden" name="base_price" value="12">
            <input type="submit" id="meta-submit-43841" name="meta-submit-43841" value="Update">
            <img src="bx_loader.gif" alt="Processing Poster Update" id="loading-4020" class="loading">
            <img src="success.png" alt="Poster Update Success" id="success-4020" class="success">
            <img src="error.png" alt="Poster Update Success" id="error-4020" class="error">
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

JavaScript

jquery.validate.min.js

附加方法.js

tooltipster.js

jQuery(document).ready(function () {
    //initialize tooltipster on text input elements
    jQuery('input[type="number"]').tooltipster({ //find more options on the tooltipster page
        trigger: 'custom', // default is 'hover' which is no good here
        position: 'top',
        animation: 'grow'
    });

    jQuery('.poster-meta-form').validate({ // initialize the plugin
        submitHandler: function (form) { 
            var sale_price_val = jQuery(this).find("input[name=sale_price]").val();
            var base_price_val = jQuery(this).find("input[name=base_price]").val();
            var meta_hidden_id = jQuery(this).find("input[name=meta_price_id]").val();
            var meta_price_id = jQuery(this).find("input[name=regular_price_id]").val();
            var parent_form = jQuery(this);

            jQuery.ajax({
                type: "POST",
                url: ajax_url,
                data:{
                    action: 'call_back_function',
                    sale_price: sale_price_val,
                    meta: meta_hidden_id,
                    meta_price: meta_price_id
                },
                cache:  false,
                beforeSend: function() {
                    parent_form.find(".loading").show();
                },
                success: function(data) {
                    if ( data == 0 ) {
                        parent_form.find(".loading").hide();
                        parent_form.find(".success").show();
                        setTimeout(function(){
                            parent_form.find(".success").fadeOut('slow');
                        }, 2000);
                    } else{
                        parent_form.find(".loading").hide();
                        parent_form.find(".error").show();
                        setTimeout(function(){
                            parent_form.find(".error").fadeOut('slow');
                        }, 2000);
                    };
                }
            });
            return false;
        }
    });
    jQuery('.size-sale-price').each(function() {
            jQuery(this).rules('add', {
                min: function(element){
                    return jQuery(element).attr('min');
                },
                required: true,
                messages: {
                    number:  "Sale Price can not be less than Base Price!"
                }
            });
        });

});

控制台错误

Uncaught TypeError: Cannot read property 'settings' of undefined at a.fn.init.rules (jquery.validate.min.js?ver=4.7.4:4) at HTMLInputElement. (social-media-sync-public.js?ver=1.0.0:534) at Function.each (jquery.js?ver=1.12.4:2) at a.fn.init.each (jquery.js?ver=1.12.4:2) at HTMLDocument. (social-media-sync-public.js?ver=1.0.0:532) at i (jquery.js?ver=1.12.4:2) at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2) at Function.ready (jquery.js?ver=1.12.4:2) at HTMLDocument.K (jquery.js?ver=1.12.4:2)

更新

Uncaught TypeError: Cannot read property 'form' of undefined at a.fn.init.rules (jquery.validate.min.js?ver=4.7.4:4) at HTMLInputElement. (social-media-sync-public.js?ver=1.0.0:546) at Function.each (jquery.js?ver=1.12.4:2) at a.fn.init.each (jquery.js?ver=1.12.4:2) at HTMLDocument. (social-media-sync-public.js?ver=1.0.0:545) at i (jquery.js?ver=1.12.4:2) at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2) at Function.ready (jquery.js?ver=1.12.4:2) at HTMLDocument.K (jquery.js?ver=1.12.4:2)

Answer 1

问题出在 each 尝试使用输入 ID 添加规则

jQuery('.size-sale-price').each(function() {
        jQuery(jQuery(this).attr('id')).rules('add', {
            min: function(element){
                return jQuery(element).attr('min');
            },
            required: true,
            messages: {
                number:  "Sale Price can not be less than Base Price!"
            }
        });
    });