Вопрос по javascript, html, jquery – Проверка, все ли входные данные формы пусты с помощью jQuery

23

Я пытаюсь проверить контактную форму и хочу создать какую-то форму заполненной формы. сообщение после заполнения каждого поля ввода (некоторые из них являются текстовыми полями, некоторые - переключателями).

Вот мой код:

$(document).ready(function() {
  $('.form:input').each(function() {
    if ($(this).val() != "") {
      $('.congrats').css("display", "block");
    }
  });
});
p.congrats {
  display: none;
}
<div class="form">
  <input type="text" />
  <br />
  <input type="text" />
</div>
<p class="congrats">Congrats!</p>

http://jsfiddle.net/7huEr/

Ваш Ответ

6   ответов
1

// Returns True if all inputs are not empty
Array.from(document.querySelectorAll('#myform input')).every(
    function(el){return el.value;}
)
3

$('#check').    var allFilled = true;
    
    $(':input:not(:button)').each(function(index, element) {
        if (element.value === '') {
            allFilled = false;
        }
    });
    
    console.log(allFilled);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form">
    <input type="text" /><br />
    <input type="text" />
</div>
<p class="congrats"></p>
<input type="button" id="check" value="check" />

38

$(document).ready(function() {
    $(".form > :input").keyup(function() {
        var $emptyFields = $('.form :input').filter(function() {
            return $.trim(this.value) === "";
        });

        if (!$emptyFields.length) {
            console.log("form has been filled");
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form">
    <input type="text" /><br />
    <input type="text" />
</div>
<p class="congrats"></p>

Error: User Rate Limit Exceeded$(document).ready(fn);Error: User Rate Limit Exceeded$(fn);Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded$('.form :input')Error: User Rate Limit Exceededvar $fields = $( ':input', '.form' );
1

http://jsfiddle.net/7huEr/38/

$(document).ready( function()
{
    // Iterate over each input element in the div
    $('.form input').each(function()
    {
        // Add event for when the input looses focus ( ie: was updated )
        $(this).blur( function()
        {
            // Variable if all inputs are valid
            var complete = true;

            // Iterate over each input element in div again
            $('.form input').each(function()
            {
                // If the input is not valid
                if ( !$(this).val() )
                {
                    // Set variable to not valid
                    complete = false;
                }
            });

 ,           // If all variables are valid
            if ( complete == true )
            {
                // Show said congrats
                $('.congrats').show();
            }
        });
    });
});​
6

$("#a").on('click',function () {
var bad=0;
 $('.form :text').each(function(){ 
        if( $.trim($(this).val()) == "" ) bad++; 
            
          
    });
    
    if (bad>0) $('.congrats').css("display","block").text(bad+' missing'); 
    else $('.congrats').hide(); 
});



 
   
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form">
    <input type="text" /><br />
    <input type="text" />
</div>
<p class="congrats"></p><input style="width:100px" value="check" id="a" type="button" />

5

serializeArray функция, так что вам не нужно беспокоиться о проверке различных типов полей или того, что считается пустым полем:

$.fn.isBlank = function() {
    var fields = $(this).serializeArray();

    for (var i = 0; i < fields.length; i++) {
        if (fields[i].value) {
            return false;
        }
    }

    return true;
};
Error: User Rate Limit Exceeded

Похожие вопросы