Jquery - избегайте пустых вводов

Question

Я делаю многошаговую форму (мастер форм), и я разделил форму на 5 частей ... так что мой первый div такой:

<div class="data-1" style="display: block; ">
    <h3>Data</h3>
    <fieldset class="inputs">
    <ol>
      // 5 text inputs here
    </ol>
    </fieldset>
</div>

Через jquery я пытался захватить 5 входов каждого div (другие div также имеют флажки, переключатели), выполнив это

 $(".data-1 :input").val();

для того, чтобы узнать значение входов каждого div ... но, похоже, мне нужно перебирать входы div.

Есть ли способ предотвратить любой пустой ввод? или есть плагин, который делает это?

Answer 1

код

$(".data-1 :input").val();

... даст вам значение элемента first в пределах first".data-1" div. Это не даст вам их всех.

Чтобы получить значения всех из них, вы можете использовать map (обычно сопровождается get):

var values = $(".data-1 :input").map(function() {
    return $(this).val();
}).get();

Это даст вам массив значений.

Созданный выше массив будет содержать пустые значения. Если вы хотите опустить пустые значения, просто верните undefined из функции итератора для них, и они будут опущены:

var values = $(".data-1 :input").map(function() {
    var val = $(this).val();
    return val ? val : undefined;
}).get();

Answer 2

$(".data-1 :input:not(:empty)").each(function()
{
// Iterating the not empty inputs
// $(this).val() contains the value of the current input
});

Answer 3

Это может быть что-то вроде того, что вы ищете ...

$(".data-1 :input").each( function() {
   var val = $.trim($(this).val());
   if ( val != '' ) {
       // do stuff here...
   }
}); 

Answer 4

Посмотрите на jQuery.Validate

http://docs.jquery.com/Plugins/Validation

  <script>
  $(document).ready(function(){
    $("#myForm").validate();
  });
  </script>

<form id="myForm" method="post">
   <p>
     <label for="cname">Name</label>
     <input id="cname" name="name" size="25" class="required" minlength="2" />
   </p>
   <p>
     <label for="curl">URL</label>
     <input id="curl" name="url" size="25"  class="url" value="" />
   </p>
   <p>
     <input class="submit" type="submit" value="Submit"/>
   </p>
 </form>