OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

jQuery validation - Cannot read property 'settings' of undefined on dynamic forms

  • Thread starter Thread starter Prafulla Kumar Sahu
  • Start date Start date
P

Prafulla Kumar Sahu

Guest
I am using Wordpress, but this question is actually a Jquery validation.

HTML section ( There is repetition of this section with different ids )

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

JavaScripts

jquery.validate.min.js

additional-methods.js

tooltipster.js

Code:
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!"
                }
            });
        });

});

Console Error

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)

Update

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)

<p>I am using Wordpress, but this question is actually a Jquery validation.</p>

<p>HTML section ( There is repetition of this section with different ids ) </p>

<pre><code><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>
</code></pre>

<p>JavaScripts</p>

<p>jquery.validate.min.js</p>

<p>additional-methods.js</p>

<p>tooltipster.js</p>

<pre><code>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!"
}
});
});

});
</code></pre>

<p>Console Error</p>

<blockquote>
<p>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)</p>
</blockquote>

<p>Update</p>

<blockquote>
<p>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)</p>
</blockquote>
 

Latest posts

Online statistics

Members online
0
Guests online
3
Total visitors
3
Top