javascript - jQuery - 如何在条件为真时取消表单提交以防止默认

Question

我有一个联系表单，当我点击提交按钮时我会检查输入值，如果至少有一个输入为空，我会运行一个警报并阻止默认表单提交，否则，我返回 true。

我的问题是，当我故意省略一个输入时，我得到了我想要的，但是如果我填写了所有输入，我就不能再提交表单了......

 jQuery(document).ready(function () {
        jQuery('#envoyez').on('click', function () {
            jQuery(':input').each(function () {
                const val = jQuery.trim(jQuery(this).val());
                if (val.length == 0) {
        alert('Fill all the inputs please');
                     jQuery("form").submit(function(e){
                     e.preventDefault();
                         });
                } else {
                    return true;
                }
            })
        })
    })

谢谢

Answer 1

您应该在 .ready() 函数中声明表单事件监听器。然后创建一个变量来处理表单的有效性。

jQuery(document).ready(function () {

    // count the number of inputs that are filled.
    var clearCount = 0;

    jQuery("form").submit(function(e) {

        // here check if clearcount is not equal to the number of fields
        if (clearCount != jQuery(':input').length)
        {
            // this means that one of the fields are not filled
            e.preventDefault();
            return false;
        }
    });

    jQuery('#envoyez').on('click', function () {

      // reset clearcount for revalidation
      clearCount = 0;

      jQuery(':input').each(function () {
          const val = jQuery.trim(jQuery(this).val());
          // check if input is not empty.
          if (val.length > 0) {
              clearCount++;
          }
      })
  })

});

这只是解决问题的一种简单方法，但如果您想要一种更好的方法，您可以简单地:

jQuery(document).ready(function () {

    jQuery("form").submit(function(e) {

        // check if one of the fields are empty
        // and so on
        if (   jQuery(this).find("input[name='NAME1']").val().length == 0
            || jQuery(this).find("input[name='NAME2]").val().length == 0
            || jQuery(this).find("input[name='NAME3']").val().length == 0)
        {
            // this means that one of the fields are not filled
            e.preventDefault();
            return false;
        }
    });
});

希望对你有帮助