jquery.form/validate插件仅在输入更改时才允许提交 [英] jquery.form/validate plugin only allow submit if input is changed

问题描述

我想使用jQuery.Form/Validate插件仅在实际更改任何输入的情况下才允许提交我的表单.

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.

使用beforeSubmit:为此有回调逻辑: http://jquery.malsup. com/form/#options-object .但是，我似乎无法使其正常运行.

There is callback logic for this using beforeSubmit: : http://jquery.malsup.com/form/#options-object. However, I can't seem to make it work.

这是我到目前为止的内容:

Here's what I have so far:

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

这是HTML:

<form id="myForm">
  <input data-stored="my title" value="my title"/>
  <textarea data-stored="my description">my description</textarea>
  <input type="submit" value="submit/>
</form>

当前console.log显示"Changed"，无论storedValue是否等于输入.

Currently the console.log shows, "Changed" regardless of whether the storedValue is equal or not to the input.

推荐答案

首先，它将永远不会显示未更改"，因为它在到达该部分之前就不会显示"returns false".您也应该过滤出提交"按钮，因为您可能没有检查它的值.

First of all it will never show "Not Changed" since it returns false before it hits that part. You should filter out the submit button too since you probably aren't checking its value.

$($form+':input').not(':submit').each(function(index, this) {
    value = this.value;
    storedValue = $(this).data("stored");
    if (value != storedValue) {
        console.log("Changed");
        return true;      
    }
    else {       
        console.log("NOT changed");
        return false;
    }
});

更新 在@wirey的大力协助下，我们(@timrpeterson和@wirey)共同提出了一个解决方案.我没有在each()循环中返回true/false，而是增加了一个值totalChanged，并在each()循环后评估它是否大于0.

UPDATE With great assistance from @wirey, together we've (@timrpeterson and @wirey) put together a solution. Instead of returning true/false within the each() loop, I incremented a value ,totalChanged, and assessed after the each() loop whether or not it was greater than 0.

这是代码:

beforeSubmit: function(arr, $form){   
var value = '', storedValue='', totalChanged=0;
$('#myForm :input').not(':submit,:hidden').each(function (i, el) {
  //console.log($(this));
    console.log($($form));
    value=$(el).val(); 
    storedValue=$(el).data("stored");          
    if (value != storedValue) {  
      totalChanged++;    
    }
    else {     
    }
}); //each

  if(totalChanged>0){
     console.log("at least one changed");
     return true;
  }
  else{
     console.log("All NOT changed");
     return false;
  }
} //beforeSubmit

这篇关于jquery.form/validate插件仅在输入更改时才允许提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！