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/
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.
Comments