My "this is required / missing fields" error message is triggering on focus out even though there is text entered into the field. I am confident it's a small issue that I am overlooking, but I can't seem to figure it out! I acknowledge that I am repeating a lot of code, but I couldn't find a way to avoid this repetition.
<h6 id="support_msg" class="lightblue">We support all</h6>
<h6 id="reg_error" class='light_red'></h6>
<form id="ajax_form" class="form-group col-sm-offset-2 col-sm-8" action="" method="post">
<label for="">First Name</label> <div id="err_fname" class="red">This is required</div>
<input type="text" id="reg_fname" class="form-control" placeholder="first name">
<label for="">Last Name</label> <div id="err_lname" class="red">This is required</div>
<input type="text" id="reg_lname" class="form-control" placeholder="last name">
<label for="">Username</label> <div id="err_uname" class="red">This is required</div>
<input type="text" id="reg_uname" class="form-control" placeholder="username">
<label for="">Email</label> <div id="err_email" class="red">This is required</div>
<input type="email" id="reg_email" class="form-control" placeholder="email">
<label for="">Password</label> <div id="err_pass1" class="red">This is required</div>
<input type="password" id="reg_pass1" class="form-control" placeholder="password">
<label for="">Verify Password</label> <div id="err_pass2" class="red">This is required</div>
<input type="password" id="reg_pass2" class="form-control" placeholder="verify password">
<label for="">State</label> <div id="err_state" class="red">This is required</div>
<input type="text" id="reg_state" class="form-control" placeholder="state">
<label for="">Age</label> <div id="err_age" class="red">This is required</div>
<input type="password" id="reg_age" class="form-control" placeholder="age">
<input id="reg_button" type="submit" value="REGISTER" class="form-submit form-control">
</form>
var err_fname = false ;
var err_lname = false ;
var err_uname = false ;
var err_email = false ;
var err_pass1 = false ;
var err_pass2 = false ;
var err_state = false ;
var err_age = false ;
var fname = $('#reg_fname').val() ;
var lname = $('#reg_lname').val() ;
var uname = $('#reg_uname').val() ;
var email = $('#reg_email').val() ;
var pass1 = $('#reg_pass1').val() ;
var pass2 = $('#reg_pass2').val() ;
var state = $('#reg_state').val() ;
var age = $('#reg_age').val() ;
$('#reg_fname').focusout(function(){
check_fname() ;
}) ;
$('#reg_lname').focusout(function(){
check_lname() ;
}) ;
$('#reg_uname').focusout(function(){
check_uname() ;
}) ;
$('#reg_email').focusout(function(){
check_email() ;
}) ;
$('#reg_pass1').focusout(function(){
check_pass1() ;
}) ;
$('#reg_pass2').focusout(function(){
check_pass2() ;
}) ;
$('#reg_state').focusout(function(){
check_state() ;
}) ;
$('#reg_age').focusout(function(){
check_age() ;
}) ;
function check_fname () {
//checking if blank fname and lastname
if(fname == ''){
$('#support_msg').hide() ;
$('#reg_error').html('Missing Fields') ;
$('#err_fname').show() ;
err_fname = true ;
return false ;
}
}
function check_lname () {
//checking if blank fname and lastname
if(lname == ''){
$('#support_msg').hide() ;
$('#reg_error').html('Missing Fields') ;
$('#err_lname').show() ;
err_lname = true ;
return false ;
}
}
function check_uname () {
//checking if blank fname and lastname
if(uname == ''){
$('#support_msg').hide() ;
$('#reg_error').html('Missing Fields') ;
$('#err_uname').show() ;
err_uname = true ;
return false ;
}
}
function check_email () {
//checking if blank fname and lastname
if(email == ''){
$('#support_msg').hide() ;
$('#reg_error').html('Missing Fields') ;
$('#err_email').show() ;
err_email = true ;
return false ;
}
}
function check_pass1 () {
//checking if blank fname and lastname
if(pass1 == ''){
$('#support_msg').hide() ;
$('#reg_error').html('Missing Fields') ;
$('#err_pass1').show() ;
err_pass1 = true ;
return false ;
}
}
function check_pass2 () {
//checking if blank fname and lastname
if(pass2 == ''){
$('#support_msg').hide() ;
$('#reg_error').html('Missing Fields') ;
$('#err_pass2').show() ;
err_pass2 = true ;
return false ;
}
}
function check_state () {
//checking if blank fname and lastname
if(state == ''){
$('#support_msg').hide() ;
$('#reg_error').html('Missing Fields') ;
$('#err_state').show() ;
err_state = true ;
return false ;
}
}
function check_age () {
//checking if blank fname and lastname
if(age == ''){
$('#support_msg').hide() ;
$('#reg_error').html('Missing Fields') ;
$('#err_age').show() ;
err_age = true ;
return false ;
}
}