Question

我需要插入一个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;
        }
    });

}

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

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

Answer 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

Answer 3

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

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

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

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

对我来说很好用

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

4 个答案: