Attempting to validate a form using jQuery, the goal is to target all form fields with class="required" and utilize the .each() function to verify if the field is empty. If it is empty, a hidden div positioned relative to the field should be displayed.
An issue arises as the provided code fails:
$('#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;
}
}); });
It works fine when selecting the input field by ID.
The HTML 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>
Seeking guidance from those experienced in jQuery as I navigate this new territory.
EDIT: Access the fiddle here - http://jsfiddle.net/7yLmq/