Jquery在发送表单之前检查所有输入是否为空答案

【问题标题】：Jquery check if all inputs are empty before sending the formJquery在发送表单之前检查所有输入是否为空
【发布时间】：2018-02-05 00:16:15
【问题描述】：

我需要插入一个 jquery 控件来查看表单的所有输入字段是否为空。如果它们为空，或者其中只有一个为空，则验证失败。

我得到一个输入字段的结果，这里是代码：

$(function(){
    $('#btnSubmit').on('click',checkEmpty);
});

function checkEmpty(){


    var isEmpty=$('#inputId').val();   
    if (isEmpty == 0 || isEmpty == "") {
        fail.text('empty field');
        return false;
    }else{
        return true;
    }
}

但是当我尝试对两个或多个输入字段进行相同操作时，事情就会出错：

$(function(){
    $('#btnSubmit').on('click',checkEmpty);
});

function checkEmpty(){

    var fail=$('#failText');

    $("formId input").each(function() {
        if($.trim($(this).val()) === ""){
            fail.text('empty field');
            return false;
        }
    });

}

在这种情况下，文本“空字段”仅出现在第一个#failText id 字段中，而不出现在第二个字段中，然后表单将我发送到相关 php 页面，而不停止发送。

【问题讨论】：

为什么不在input 元素上添加required 属性。
因为你是 returning false 在 each 内部（这会打破循环），但不会从函数返回
哇！就是现在，billyonecan。大约只有一个字段填写了文本？

标签： jquery forms validation

【解决方案1】：

您的 checkEmpty 函数不会返回 false。（您只在每个循环中返回 false）

将你的 checkEmpty 函数改写成这样：

function checkEmpty(){

var fail=$('#failText');
var failCount = 0;

$("formId input").each(function() {
    if($.trim($(this).val()) === ""){
        fail.text('empty field');
        failCount++;
        return false;
    }
});

if(failCount > 0){
return false;
}
}

【讨论】：

【解决方案2】：

http://jsbin.com/deliqi/1/edit?html,js,console,output

  var emptyInputs = $("input").filter(function(){
    return !$.trim(this.value);
  }).length > 0;

  if(emptyInputs) // do stuff

【讨论】：

【解决方案3】：

这是因为当您执行 $('#failText') 时，它只会选择该 ID 的第一个实例。如果要选择所有实例，请分配一个类。

但是在您的情况下，您也不想这样做，因为您想在并非全部为空的字段上显示“字段为空”消息，因此您必须为它们分配不同的 id。

看看这个演示：https://jsfiddle.net/Lpzp2jj5/8/

【讨论】：

【解决方案4】：

研究你的答案，我得到了这个解决方案：

function isEveryInputEmpty() {
    var failCount = ($('#formId input').length)-1;
    var txTarget=$('#formId #txTargetResult');

    $('#formId input').each(function() {

        if ($(this).val() === '') {
            txTarget.text('empty field');
            failCount++;
            return false;
        }
    });

对我来说很好用

【讨论】：