form validation javascript

Question

meine "dies ist erforderlich/fehlende felder" feuert auf focus out sogar thoe die string hat text in das feld eingeben, ich bin sicher, es ist etwas klein, dass ich vermisse aber nicht meinen kopf um es wickeln! Ich weiß, dass ich viel Code vervielfältige, aber konnte nicht denken, wie man das tut, ohne so viel zu wiederholen!

<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 1

Dies ist die falsche Implementierung. Sie müssen eine gleiche Klasse in allen Textfeldern anwenden. Binden Sie dann das focusout-Ereignis an die Klasse und greifen Sie im Ereignishandler auf einen aktuellen Textfeldwert mit $ (this) .val() zu und schreiben Sie Ihre Logik. Unten ist ein Beispiel.