jQuery验证 - 无法在动态表单上读取未定义的属性“设置”

时间:2017-04-29 08:11:44

标签: javascript jquery html wordpress jquery-validate

我正在使用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

附加methods.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!"
                }
            });
        });

});

控制台错误

  

未捕获的TypeError:无法读取未定义的属性“设置”       at a.fn.init.rules(jquery.validate.min.js?ver = 4.7.4:4)       在HTMLInputElement。 (社会化媒体同步-public.js版本1.0.0 =?534)       在Function.each(jquery.js?ver = 1.12.4:2)       at a.fn.init.each(jquery.js?ver = 1.12.4:2)       在HTMLDocument。 (社交媒体同步-public.js版本= 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)       在Function.ready(jquery.js?ver = 1.12.4:2)       在HTMLDocument.K(jquery.js?ver = 1.12.4:2)

更新

  

未捕获的TypeError:无法读取未定义的属性“形式”       at a.fn.init.rules(jquery.validate.min.js?ver = 4.7.4:4)       在HTMLInputElement。 (社会化媒体同步-public.js版本1.0.0 =?546)       在Function.each(jquery.js?ver = 1.12.4:2)       at a.fn.init.each(jquery.js?ver = 1.12.4:2)       在HTMLDocument。 (社会化媒体同步-public.js版本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)       在Function.ready(jquery.js?ver = 1.12.4:2)       在HTMLDocument.K(jquery.js?ver = 1.12.4:2)

1 个答案:

答案 0 :(得分:0)

问题在于version: '2' services: httpd: image: httpd ports: - "80:80" .. networks: - client1_default - client2_default external_links: - client1_tomcat_1 - client2_tomcat_1 networks: client1_default: external: true client2_default: external: true 尝试使用输入ID

添加规则
each