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

Question

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

它仅适用于一名学生/部分。 当您转到这里时:https://jsfiddle.net/riffaz/7nrabcos/点击“立即付款”按钮。 您将看到空字段的弹出窗口，并且不会提交表单。

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

我不知道为什么..

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');
            }
        });
    })

它是在 WordPress 中

似乎这个有效:https://jsfiddle.net/1xk9gtvo/但在 WordPress 中不起作用.. 我没有看到任何控制台错误..

我很困惑..

如何在 WordPress 网站上实现此功能以及我的代码有什么问题？

Answer 1

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

编辑: 抱歉，我忘了实际为您提供解决方案。迭代循环后，我会计算 ('input:required').not(':checked').length 的数量，并仅当该数字为零时才提交表单。