Question

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

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

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

我不知道为什么......

的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/但不能在WordpPress中工作.. 我没有看到任何控制台错误..

我很困惑......

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

Answer 1

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

编辑：对不起，我忘了给你一个解决方案。迭代循环后，我会计算（＆＃39;输入：必需＆＃39;）的数量。不是（＆＃39;：已检查＆＃39;）。长度并仅在此数字为零时提交表单。

Answer 2

您正在寻找的代码。

    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验证动态添加的字段并阻止表单提交？

2 个答案: