Showing hidden div with jquery .each() function

Belgor

I'm trying to validate a form with jQuery. I'm selecting all form fields that have class="required" and using .each() function to check if the field is empty. If it's empty, I'm showing hidden div positioned relatively to the field.

Something is obviously wrong as the following code is failing:

$('#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;
    }
}); });

If I select the input field by ID, the rest of the code works fine.

The markup:

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

I'm new to jQuery and I'll be thankfull if someone can point me in the right direction

EDIT: Here is the fiddle - http://jsfiddle.net/7yLmq/

DaniP

Try to loop between each $('.required') :

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Div not showing after being hidden JQuery

Showing a hidden div with jquery and moving to the top of the page

Showing hidden div in ajax success function for displaying a remaining registration form

Jquery each function for outside div

Jquery - loop through each button to show the hidden div

Div not showing after being hidden

div click not working after showing div by Jquery slideToggle and run server code by hidden button in updatepanel

Execute jQuery function each time scroll on div

Jquery each function target children of div

Jquery. Apply function to each div individually

jQuery .each function runs over and ajax response showing later

JQuery .each() to toggle hidden elements

Showing specific number of <div>'s on jQuery click function

<div> displays "0" instead of showing the appended result of a function - JQuery

Google map not showing when inside a hidden div

Showing / Hiding Div With jQuery

Showing div content with jquery

jQuery - progressivly showing div

jQuery each in each function

Jquery, search and show a hidden div

iterating through and showing hidden child divs jquery

jQuery - move div using each inside of click function

Jquery Select a Div and trigger another div that is hidden

javascript/jquery onChange function for div.text to update form hidden field value

how to hide back a hidden div which was shown after jquery click function

Function for each div

JQUERY UI Dialog not showing the div

JQuery toggled div not showing on resize

Updating div with jQuery not showing on DOM