javascript: предотвратить отправку, если все текстовые поля пустые?

Question

Я использую этот javascript, чтобы отключить кнопку отправки формы до тех пор, пока пользователь не наберет поле textarea. после заполнения текстовой области кнопка отправки больше не отключается.

однако, пока это работает для отдельной текстовой области, я теперь хочу найти способ сделать эту работу так, чтобы, если бы у меня было четыре поля ввода текста, чтобы сохранить кнопку отправки отключенной, пока все они НЕ пусты/заполненный текстом.

Вот что им с помощью на данный момент:

<form action=\"includes/welcomestats.php\" method=\"post\" id=\"form1\" onSubmit=\"if (this.display_name.value == '') {return false;}\"> 
<input type=\"text\" name=\"display_name\" id=\"display_name\" maxlength=\"30\" placeholder=\"Display Name\"> 
<input type=\"submit\" class=\"welcome-submit2\" name=\"submit\" value=\"Next ->\" id=\"submit\"/> 
</form> 

    <script> 
    $(function(){ 

     $("#submit").submit(function(e){ 

      if($("#display_name").val()=="")) 
      {  
      e.preventDefault(); 
      } 
     });   

    }); 
    </script> 

но теперь я добавляю больше полей ввода текста в моей форме, так что мне нужно скрипт, чтобы моя кнопка отправки отключена, пока все текстовые поля не заполняются , Кто-нибудь может мне помочь?

я хочу, чтобы добавить эти текстовые поля к моей форме:

<input type=\"text\" name=\"public_email\" id=\"public_email\" maxlength=\"50\" placeholder=\"Email Address\"> 

<input type=\"text\" name=\"phone\" id=\"phone\" maxlength=\"30\" placeholder=\"Phone Number\"> 

<input type=\"text\" name=\"age\" id=\"age\" maxlength=\"2\" placeholder=\"Display Age\"> 

Answer 1

Вы можете использовать .filter метод, чтобы получить весь пустой элемент ввода, а затем проверить длину.

if ($('#form1 input').filter(function(){return $(this).val().length == 0;}).length > 0) { 
    e.preventDefault(); 
} 

Answer 2

Попробуйте использовать:

<script> 
$(function(){ 

    $('form input').each(function(){ 
     if($(this).is(':empty')){ 
      $('form #submit').preventDefault(); 
     } 
    });  

}); 
</script> 

Answer 3

Используйте это: http://jsfiddle.net/qKG5F/641/

<input type="submit" id="register" value="Register" disabled="disabled" /> 

(function() { 
$('form > input').keyup(function() { 

    var empty = false; 
    $('form > input').each(function() { 
     if ($(this).val() == '') { 
      empty = true; 
     } 
    }); 

    if (empty) { 
     $('#register').attr('disabled', 'disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie 
    } else { 
     $('#register').removeAttr('disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie 
    } 
}); 
})() 

Answer 4

Вам нужен оператор ИЛИ - ||

Так что, если display_name пуст или public_email пуст и т. д.

$(function(){ 

    $("#submit").submit(function(e){ 

     if($("#display_name").val()=="" || $("#public_email").val()=="" || $("#phone").val()=="" || $("#age").val()=="") 
     {  
     e.preventDefault(); 
     } 
    });   

}); 

Answer 5

подавай все текстовые поля, которые необходимо включить в этом валидация класса class="required" или что-то вдоль этих линий, то вы можете сделать это

var empty = $('.required').filter(function(){ return $(this).val() == "" }).length; 
if(empty === 0){ 
    //Enable your submit button all text fields have a value 
} 

Answer 6

Попробуйте эту функцию:

function checkInputs(form) { 
    var inputs, all, 
     status = true; 

    if (form && form instanceof jQuery && form.length) { 
    inputs = form.find("input[type=text]"); 

    all = inputs.length; 

    while (all--) { 
     if (!inputs[all].value) { 
     status = false;   

     break; 
     } 
    } 

    return status; 
    } 
} 

И демо здесь: http://jsbin.com/afukir/1/edit

EDIT: Я добавил instanceof, чтобы убедиться, что эта функция wil l только, если форма на самом деле является объектом jQuery.