Jquery проверьте, все ли пустые пустые перед отправкой формы

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

Но все становится не так, когда я пытаюсь то же самое с двумя или более полей Imput:

$(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, а не во втором, а затем форма отправляет меня на относительную страницу php, не останавливая отправку.

Answer 1

Функция checkEmpty не возвращает 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') это только выбирает первый экземпляр этого идентификатора. Если вы хотите выбрать все экземпляры, тогда назначьте класс.

Но В этом случае вы не хотите этого делать, потому что вы хотите показать сообщение «пустое поле» в пустых полях, поэтому вам нужно назначить им другой идентификатор.

Посмотрите на это демо: 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; 
     } 
    }); 

отлично работает для меня