2012-07-21 53 views
1

我正在嘗試使用jquery驗證進行註冊表單和adn。我有個問題。驗證登記表

我只想要一個「警告信息」爲「生日選擇框」..我不能管理這個,它看起來很糟糕,當我得到每個bday選擇框3x警告。如果至少有一個選擇框未選擇,我如何給出「一個」警告消息?

我的代碼如下所示,我做了簡短而工作了測試:

<script language="JavaScript" type="text/javascript" src="js/jquery-1.3.2.min.js"></script> 
<script language="JavaScript" type="text/javascript" src="js/jquery.validate.js"></script> 
<script> 
    $(document).ready(function(){ 
    $.validator.addMethod("username", function(value, element) { 
     return this.optional(element) || /^[a-z0-9\_]+$/i.test(value); 
    }, "Username must contain only letters, numbers, or underscore."); 

    $("#regForm").validate(); 
    }); 

    </script> 

</head> 
<body> 


<div> 
     <form method="post" id="regForm" action="register.php"> 
      <div> 
       Name<br> 
       <input id="user_name" name="name" type="text" minlength="5" class="required username"/><br> 

      </div> 
      <div> 
       E-mail<br> 
       <input id="usr_email3" name="email" type="text" class="required email"/><br> 

      </div> 
      <div> 
       Password<br> 
       <input name="pass1" type="password" class="required password" minlength="5" id="pwd" /><br> 

      </div> 
      <div> 
       Confirm Password<br> 
       <input id="pwd2" name="pass2" class="required password" type="password" minlength="5" equalto="#pwd" /><br> 

      </div> 


      <div> 
      Birthday: 
      <select name="birthday_day" class="required"> 
      <option value="">Day</option> 
      <option value="1" >1</option> 
      <option value="2" >2</option> 
      </select> 
      <select name="birthday_month" class="required"> 
      <option value="">Month</option> 
      <option value="1" >January</option> 
      </select> 
      <select name="birthday_year" class="required"> 
      <option value="">Year</option> 
      <option value="1900" >1900</option> 
      </select> 

      </div> 
      <div> 
      Gender: 
      <select name="gender" class="required"> 
      <option value="">Choose</option> 
      <option value="Male">Male</option> 
      <option value="Female">Female</option><br /></div> 
      <br> 
      <div>  
      <input id="doRegister" name="doRegister" type="submit" value="Send"/> 
      </div> 
     </form> 

</div> 

回答

0

給一個id到div周圍生日標籤:

<div id="required"> 
      Birthday: 
      <select name="birthday_day" class="required"> 
      <option value="">Day</option> 
      <option value="1" >1</option> 
      <option value="2" >2</option> 
      </select> 
      <select name="birthday_month" class="required"> 
      <option value="">Month</option> 
      <option value="1" >January</option> 
      </select> 
      <select name="birthday_year" class="required"> 
      <option value="">Year</option> 
      <option value="1900" >1900</option> 
      </select> 

      </div> 

使用下面的代碼申請紅色邊框如果沒有選擇任何選擇標籤:

$('#doRegister').click(function(){ 

var a = $('select[name="birthday_day"]').val(); 
var b = $('select[name="birthday_month"]').val(); 
var c = $('select[name="birthday_year"]').val(); 

if(a == '' || b == '' || c == '') 
{ 
    $('div#required').css('border', '1px solid f60f60'); 
} 
else 
{ 
$('div#required').css('border', 'none'); 
} 

}); 

這當然會避免你您正在使用的驗證程序插件的搜索結果