表單驗證javascript

Question

我的「這是必填/缺失的字段」是射擊焦點甚至thoe字符串有文本進入領域，即時確定其小東西我失蹤，但不能包裹我的頭周圍！我知道我重複了很多代碼，但是沒有想到如何做到這一點，而沒有重複這麼多！

<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

這是錯誤的實現。您需要在所有文本框中應用相同的類。然後將focusout事件綁定到類，並在事件處理程序中通過$（this）.val（）訪問當前文本框的值並編寫您的邏輯。以下是樣本。

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

})