Javascript 如何使用jQuery验证动态添加的字段并防止表单提交？

我有一个表单，它有信誉/动态字段。。 如果必填字段为空，我想显示一个弹出窗口

它只适用于一个学生/部门。 当您进入此处时：单击“立即付款”按钮。 您将看到空字段的弹出窗口，表单将不会提交

但是，当您使用+签名按钮添加另一名学生并提交表单而不填写第二名学生或部分时，也会显示该部分的弹出窗口。。但在那之后，它会立即提交表格

我不知道为什么

jQuery

jQuery('#payBtn').on('click', function(event) {
        event.preventDefault();
        event.stopPropagation();

        var formElement = jQuery(this).parents('form');
        formElement.find('input:required').each(function() {
            var minLength = 1;
            var value = jQuery(this).val();
            var checked = true;
            if (value.trim().length < minLength) {
                console.log('length is not ok');
                checked = false;
            }

            if (!checked) {
                console.log(jQuery(this).attr('name') + ' is not correctly filled!');
                var alertMsg = jQuery(this).attr('name') + ' is not correctly filled!';
                alert (alertMsg);
            } else {
                console.log('all is ok');
                formElement.submit();
                //jQuery('#myModal').modal('toggle');
            }
        });
    })

jQuery（'#payBtn'）。在（'click'，函数（事件）{
event.preventDefault（）；
event.stopPropagation（）；
var formElement=jQuery（this）.parents（'form'）；
formElement.find（'input:required'）。每个（函数（）{
var minLength=1；
var value=jQuery（this.val（）；
var检查=真；
if（value.trim（）.length

而且是在WordPress中

这个似乎有效，但在WordPress中不起作用。。 我没有看到任何控制台错误

我很困惑

---

我怎样才能在WordPress网站上实现这一点？我的代码有什么问题？

我还没有运行你的代码，但我突然想到的是，你在每个循环中提交表单。换句话说：第一个必需且选中的输入将触发表单提交。我假设您看到的是第二个复选框的弹出窗口，因为循环的第二次迭代是在您提交的请求的响应到达浏览器之前完成的

编辑：

---

对不起，我忘了给你一个解决方案。迭代循环之后，我将计算（'input:required'）。而不是（':checked'）。length的数量，并仅在该数字为零时提交表单

我还没有运行您的代码，但我突然想到的是，您正在每个循环中提交表单。换句话说：第一个必需且选中的输入将触发表单提交。我假设您看到的是第二个复选框的弹出窗口，因为循环的第二次迭代是在您提交的请求的响应到达浏览器之前完成的

编辑：

---

对不起，我忘了给你一个解决方案。迭代循环之后，我将计算（'input:required'）。而不是（':checked'）。length的数量，并仅在该数字为零时提交表单

您正在查找的代码

    jQuery('#payBtn').on('click', function(event){
      event.preventDefault();
      event.stopPropagation();

      var formElement = jQuery(this).parents('form');       

      formElement.find('input:required').each(function(){

         //check if current input element is checked and count empty fields
         var emptyFields = jQuery(this).not(':checked').filter(function() {
            return jQuery(this).val() === "";
         }).length;

         // call form submit only if emptyFields are zero
         if (emptyFields === 0) {
            formElement.submit();
         } else {
             console.log(jQuery(this).attr('name') + ' is not correctly filled!');
             return false;
         }
      });
    });

---

您正在查找的代码

    jQuery('#payBtn').on('click', function(event){
      event.preventDefault();
      event.stopPropagation();

      var formElement = jQuery(this).parents('form');       

      formElement.find('input:required').each(function(){

         //check if current input element is checked and count empty fields
         var emptyFields = jQuery(this).not(':checked').filter(function() {
            return jQuery(this).val() === "";
         }).length;

         // call form submit only if emptyFields are zero
         if (emptyFields === 0) {
            formElement.submit();
         } else {
             console.log(jQuery(this).attr('name') + ' is not correctly filled!');
             return false;
         }
      });
    });

---

是的，我正在

中提交表格。每个
。。但我不知道如何更新你说的代码。。。当我试图接受
表单提交时，它说“checked”未定义。。请给我一个工作示例/更新的代码好吗？是的，我正在
中提交表格。每个
。。但我不知道如何更新你说的代码。。。当我试图接受
表单提交时，它说“checked”未定义。。能给我一个工作示例/更新的代码吗？