Javascript jquery.form/validate插件仅允许在输入更改时提交

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

使用beforeSubmit:：，对此有回调逻辑。然而，我似乎无法让它工作

以下是我目前掌握的情况：

$(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显示已更改，无论storedValue是否等于输入。

首先，它永远不会显示未更改，因为它在命中该部分之前返回false。您也应该过滤掉submit按钮，因为您可能没有检查它的值

$($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共同制定了一个解决方案。我没有在每个循环中返回true/false，而是增加了一个值totalChanged，并在每个循环之后评估它是否大于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

---

-@wirey，谢谢，我认为我的每个循环作为第一个值仍然存在问题，标题没有改变，但是描述和提交输入都改变了。您可能无法在循环中返回true/false？想法？尽管：submit被过滤掉了，但仍然有3个console.log，这也很奇怪。同样，每个循环似乎都有问题。@Timperson也看到了这一点。它似乎也会自动生成一个值为submit的隐藏字段。此外，如果返回false，它将停止执行，因此如果textarea更改而不是标题，它将永远不会到达textarea验证。您是否返回false以阻止表单提交？这是一个更新的小提琴，它的工作就像你想要的，我想。除了这把小提琴外，别无归路，假-@wirey，太棒了，谢谢。就是这样。最后一个问题，如果你不介意的话。当然，我的真实页面和控制台上有多个表单。我有点困惑，因为console.log$$form只计算id=myForm。必须有某种方法来限制每个循环，但我不确定，想法？所以它也在评估页面上不同形式的元素？我不太确定，因为$$form+“：input”应该只过滤当前表单中的元素。否则，您可以通过硬编码$myForm:input.not来选择正确的表单。eachI删除了我的评论，因为我认为您使用的是不同的插件。在任何一种情况下，根据您的标记，我的注释对有效，并且可能对其他人有效。@谢谢，我将检查是否在验证中包含submitHandler:代码{…函数是必要的还是不必要的。不管怎样，谢谢你的提示！我的观点不一定是你需要submitHandler…而是你不应该将.validate包含在处理程序中。因为.validate在页面加载时初始化表单验证。但是当它在处理程序中时，验证选项只有在这样的情况下才会初始化t处理程序被激发，这会导致奇怪和意外的结果。@Sparky672，submitHandler:在我的示例中，封闭验证是必要的。我是否应该以另一种方式重构它？如果需要在验证内部使用它，这很好。但是在处理程序中封闭验证会导致验证初始化不正确。请参阅，和。