Показать скрытый div с jquery .each() function

Question

Я пытаюсь проверить форму с помощью jQuery. Я выбираю все поля формы, которые имеют class="required", и используя функцию .each(), чтобы проверить, пустое поле. Если он пуст, я показываю скрытый div, расположенный относительно поля.

Что-то явно не так, как следующий код не удается:

$('#application').submit(function(){ 
var requiredFields = $('.required').val(); 
requiredFields.each(function(){ 
    if (requiredFields == ''){ 
     position = requiredFields.position(); 
     width = requiredFields.outerWidth(); 
     $("#error-wrapper-mail").css({ 
      visibility: "visible", 
      top: (pos.top - 8) + "px", 
      left: (pos.left + width + 25) + "px" 
     }).hide().fadeIn("slow").delay(2700).fadeOut("slow"); 
     requiredFields.addCLass("not-valid").focus().delay(3500).queue(function(){ 
      $(this).removeClass("not-valid"); 
     }); 
     return false; 
    } 
}); }); 

Если я выбираю поле ввода с помощью ID, остальная часть кода работает отлично.

Разметка:

<form role="form" id="application" action="add-customer.php" method="post" enctype="multipart/form-data"> 
    <label for="Input-firstname">First name<span class="redstar"> * </span></label> 
    <input type="text" class="form-control required" id="Input-firstname" name="firstname" placeholder="Your first name"> 
    <br /> 
    <label for="Input-lastname">Last name<span class="redstar"> * </span></label> 
    <input type="text" class="form-control required" id="Input-lastname" name="lastname" placeholder="Your last name"> 
    <br /> 
    <label for="InputPass">Password<span class="redstar"> * </span></label> 
    <input type="password" class="form-control required" id="InputPass" name="pass" placeholder="Choose your password"> 
    <span class="help-block">Please create a password more than 6 symbols long, including uppercase letters, lowercase letters and digits.</span> 
    ... 
</form> 

Я новичок в JQuery, и я буду благодарностью, если кто может мне точку в правильном направлении

EDIT: Вот скрипка - http://jsfiddle.net/7yLmq/

Answer 1

Попробуйте петлю между каждым $('.required'):

$('.required').each(function(){ 
    var requiredFields = $(this).val(); 
    // Your Code 
}); 

Answer 2

Ваш код также можно очистить, используя несколько других методов jQuery.

$('#application').submit(function(){ 
    $('.required').each(function(){ 
    if($(this).val() == ''){ 
     $(this).closest('.help-block').fadeIn(); 
     return false; 
    } 
    }); 
}); 

Это предполагает, что вы будете иметь один help-block за required поле ввода. Вы могли бы легко адаптировать это для перемещения help-block в текущее поле required, однако я не вижу смысла, если вы не хотите, чтобы эти сообщения загружались динамически.