form validation javascript

Question

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

selvakumar · Accepted Answer · 2016-11-30 03:55:51Z

1

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

})

answered Nov 30, 2016 at 3:55

selvakumar

6547 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Markese P Over a year ago

Thanks for that response , mines may be the wrong implementation but do you have any clue on why its not working , Im missing something !

selvakumar Over a year ago

create a fiddle and provide the link

selvakumar Over a year ago

add the below line into your function before the if condition. var fname = $('#reg_fname').val() ;

Markese P Over a year ago

lmao thanks man, simple stuff always get me like this ! works like magic gotta pay attention to scope a bit more !

Collectives™ on Stack Overflow

form validation javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related