Markese P Markese P - 7 days ago 6
CSS Question

form validation javascript

my "this is required / missing fields" is firing on focus out even thoe the string has text enter into the field , im sure its something small that I am missing but cant wrap my head around it ! i know i am duplicating alot of code but couldnt think of how to do this without repeating so much !

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

Answer

This is the wrong implementation. You need to apply a same class in all the textbox. Then bind focusout event to the class and in event handler access a current textbox value by $(this).val() and write your logic. Below is sample.

$(".test").bind("focusout", functinon(){    
 if($(this).val() == ''){
                $('#support_msg').hide() ;
                $('#reg_error').html('Missing Fields') ;
                $('#err_uname').show() ;              
                return false ;
              }

})