2013-10-15 78 views
0

我有一個看起來像這樣隱藏DIV開始 - jQuery的

 <form id="form-send"> 
      <table class="form-table"> 
       <tbody> 
        <tr> 
         <td width="30%">First Name <span class="required">*</span></td> 
         <td width="70%"> 
          <input type="text" id="first-name" value="" /> 
          <div id="first-name-error-msg" class="error-box"></div> 
         </td> 
        </tr> 
        <tr> 
         <td>Last Name<span class="required">*</span></td> 
         <td> 
          <input type="text" id="last-name" value="" /> 
          <div id="last-name-error-msg" class="error-box"></div> 
         </td> 
        </tr> 
        <tr> 
         <td>Address</td> 
         <td><input type="text" value="" /></td> 
        </tr> 
        <tr> 
         <td><button type="submit">Send</button></td> 
         <td><button type="reset">Reset</button></td> 
        </tr> 
       </tbody> 
      </table> 
     </form> 

我用它來驗證表單輸入的腳本看起來像這樣

 $(document).ready(function($) { 
      $('#form-send').submit(function(){ 
       var error = 0; 
       var name = $('#first-name').val(); 
       if (name == '') { 
        error = 1; 
        $('#first-name').addClass('error'); 
        $('#first-name-error-msg').html(" - First name is required"); 
        $('#first-name-error-msg').parent().show(); 
       } 
       var name = $('#last-name').val(); 
       if (name == '') { 
        error = 1; 
        $('#last-name').addClass('error'); 
        $('#last-name-error-msg').html(" - Last name is required"); 
        $('#last-name-error-msg').parent().show(); 
       } 
    if (error) { 
     return false; 
    } else { 
     return alert("Email sent"); 
    } 
      }); 
     }); 

一種形式。如果我按下提交按鈕而不填寫錯誤消息顯示的字段。我想要做的是:在用戶開始再次輸入輸入字段時顯示錯誤消息之後,錯誤消息(包含該消息的div)應該消失。我已經試過這樣的事情

$('.error').keyup(function() { 
    $('.error-box').hide('slow'); 
}); 

,但它不會工作,能有人給我什麼一些提示我做錯了,或者我應該用什麼樣的方法?

回答

2

使用​​dynamically attached classes

$(document).on('keyup','.error',function() { 
    $(this).next('.error-box').hide('slow'); 
}); 

Working Demo

可以簡化您使用一樣,code

$('#form-send').submit(function() { 
    var error = 0; 
    var status=true; 
    $('input.required-input').each(function(){ 
     $this=$(this); 
     if(!$.trim($this.val())) 
     { 
      $this.addClass('error'); 
      $this.next('.error-box').html($this.attr('title')).show(); 
      status=false; 
     } 
     else 
     { 
      $this.removeClass('error'); 
      $this.next('.error-box').html('').hide(); 
     } 
    }) 
    return status; 
}); 

Updated Demo