Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery.form/validate plugin only allow submit if input is changed
    text
    copied!<p>I'd like to use the jQuery.Form/Validate plugins to only allow my form to be submitted if any of inputs were actually changed.</p> <p>There is callback logic for this using <code>beforeSubmit:</code> : <a href="http://jquery.malsup.com/form/#options-object" rel="nofollow">http://jquery.malsup.com/form/#options-object</a>. However, I can't seem to make it work. </p> <p>Here's what I have so far: </p> <pre><code>$(document.body).on('click', 'input[type="submit"]', function(){ var $form =$('form'); $form.validate({ submitHandler: function($form) { $($form).ajaxSubmit({ beforeSubmit: function(arr, $form){ var value = '', storedValue=''; $($form+':input').each(function (index, el) { value=$(el).val(); storedValue=$(el).data("stored"); if(value!=storedValue){ console.log("Changed"); return true; } else { return false; console.log("NOT changed"); } }); ...success handling, etc.. beforeSubmit: function(arr, $form) { var value = '', storedValue=''; $($form+':input').each(function (index, this) { value=this.value; storedValue=$(this).data("stored"); if(value!=storedValue){ console.log("Changed");return true; } else { return false; console.log("NOT changed"); } }); } </code></pre> <p>Here's the HTML:</p> <pre><code>&lt;form id="myForm"&gt; &lt;input data-stored="my title" value="my title"/&gt; &lt;textarea data-stored="my description"&gt;my description&lt;/textarea&gt; &lt;input type="submit" value="submit/&gt; &lt;/form&gt; </code></pre> <p>Currently the console.log shows, <code>"Changed"</code> regardless of whether the <code>storedValue</code> is equal or not to the input.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload