Question

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

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

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

希望有所帮助

Answer 2

另一种方式：

$("#myForm").submit(function (e) {
    e.preventDefault();

    //Check for any blank fields. Return true or false
    var isBlankInput = $("#myForm input").filter(function(){return $.trim($(this).val()).length === 0}).length === 0; 
    
    if (!isBlankInput) {
        alert('Fill all the inputs please');
        return false;
    }
    else
    {
        alert("Form submission");
        //$(this).submit();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form id="myForm">
    <input type="text" value="" />
    <input type="text" value="" />
    <input type="submit" value="Submit Form" />
</form>

jQuery - 当条件为真时，如何取消表单提交防止默认

2 个答案: