jQuery 表单验证检查以循环结束

Posted 2023-05-09

【中文标题】jQuery 表单验证检查以循环结束

【英文标题】：jQuery form validation check ending up in a loop

【发布时间】：2019-01-01 13:27:11

【问题描述】：

如果涉及到 jQuery，我是个新手。我正在尝试为我的表单进行良好的客户端验证。 （目前只检查 X 字段是否为空）

但是当我提交表单时，我最终陷入了一个永远的循环。

我可以解释问题，并且我理解“为什么”。但我不知道如何解决它。

出现问题的原因是： 每次我提交表单时，他都会再次运行验证检查，然后在没有任何错误的情况下提交，但是因为我提交了，所以他再次检查 - 等等。

通过这段代码，我可以监控表单是否被提交。 （如果是这样，让验证开始）

 // Form validation on submitting the form
  $('form').on('submit', function() 
    var id = $(this).attr('id');
    console.log('Form is submitted');

    submitFormValidation(id);
  );

我正在尝试使用此代码验证每个输入字段。

 function submitFormValidation(id) 
  event.preventDefault();

  var goodCount = 0;
  var goodCountMinimum = $('#' + id + ' .c-contact-form-item-input').length;

  $('#' + id + ' .c-contact-form-item-input').each(function () 
    if ($(this).val().length == 0) 
      $(this).parent().find('span').css('background-color', 'red');
      $(this).parent().find('span').css('width', 'calc(100% - 30px');
      $(this).parent().find('i').css('background-color', 'red');
      $(this).parent().find('i').css('animation', 'none');
      $(this).parent().find('i').css('opacity', '1');
    
    else 
      $(this).parent().find('span').css('background-color', 'green');
      $(this).parent().find('span').css('width', 'calc(100% - 30px');
      $(this).parent().find('i').css('background-color', 'green');
      $(this).parent().find('i').css('animation', 'none');
      $(this).parent().find('i').css('opacity', '1');

      goodCount = goodCount + 1;
      return goodCount;
    
  );

  if (goodCount == goodCountMinimum) 
    $('#' + id).submit();
  

我希望有人可以帮助我解决如何修复永无止境的循环。

谢谢！

【参考方案1】：

尝试改变...

$('#' + id).submit();

到...

$('#' + id)[0].submit();

这两者的区别在于，第一个触发 jQuery 对象的提交，第二个触发原始元素的 sumbit。在 Element 而不是 jQuery 对象上触发提交应该会导致跳过 jQuery 提交事件处理程序。

示例...

$('form').on('submit', function(e)
  console.log('submitted!');
  e.preventDefault();
  
  setTimeout(function()
    e.target.submit();
  , 5000);
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="http://www.google.com/">
  <button>Go!</button>
</form>

【参考方案2】：

改变

if (goodCount == goodCountMinimum) 
 $('#' + id).submit();

到

if (goodCount == goodCountMinimum) 
  return;
 else 
  e.preventDefault();//pass in the event object to the function

要使此解决方案起作用，请将您的函数更改为采用两个参数：

function submitFormValidation(id, e) 

然后像这样调用它：

$('form').on('submit', function(e) 
var id = $(this).attr('id');
console.log('Form is submitted');

submitFormValidation(id, e);
);

如果您提交表单（使用 jQuery 的submit()），jQuery 的submit 事件处理程序将不断被调用。仅返回将允许执行表单的默认操作（即提交）。