2011-06-22 186 views
0

我想验证模糊上的单选按钮并写了一个通用函数来验证所有单选按钮集。jQuery表单验证:关于模糊的单选按钮验证

的HTML:

<html> 
<body> 
<table width="100%"> 
<tr> 
    <td>Body Type</td> 
    <td><div id="bodyType"> 
    <input type="radio" tabindex="10" name="bodyType" value="1"> Slim &nbsp;&nbsp;&nbsp; 
    <input type="radio" tabindex="11" name="bodyType" value="2"> Average &nbsp;&nbsp;&nbsp; 
    <input type="radio" tabindex="12" name="bodyType" value="3"> Athletic &nbsp;&nbsp;&nbsp; 
    <input type="radio" tabindex="13" name="bodyType" value="4"> Heavy<span class="form-error"></span> 
    </div> 
    </td> 
</tr> 
<tr> 
    <td>Complexion</td> 
    <td><div id="complexion"> 
    <input type="radio" tabindex="14" name="complexion" value="1"> Very Fair &nbsp;&nbsp;&nbsp; 
    <input type="radio" tabindex="15" name="complexion" value="2"> Fair &nbsp;&nbsp;&nbsp; 
    <input type="radio" tabindex="16" name="complexion" value="3"> Wheatish &nbsp;&nbsp;&nbsp; 
    <input type="radio" tabindex="17" name="complexion" value="4"> Wheatish Brown &nbsp;&nbsp;&nbsp; 
    <input type="radio" tabindex="18" name="complexion" value="5"> Dark <span></span> 
    </div> 
    </td> 
</tr> 
</table> 
</body> 
</html> 

jQuery的:

$(document).ready(function(){ 

    var bodyType = $("#bodyType"), 
     complexion = $("#complexion"); 
    bodyType.find('input').blur(validate(this)); 
    complexion.find('input').blur(validate(this)); 

    function validate(obj){ 
     var tagname = $("input:first", obj).attr("name"); 
     var arr = document.getElementsByName(tagname); 
     var counter = 0; 
     var check = 0; 
      while(counter < arr.length) 
      { 
       if(arr[counter].checked == true) 
       { 
        check++; 
       } 
       counter++; 
      } 
      if(check > 0) 
      { 
       $(obj).find('span').attr("class","form-ok").html('OK'); 
       return true 
      } 
      else 
      { 
       $(obj).find('span').attr("class","form-error").html('Choose'); 
       return false; 
      } 
    } 
}); 

的CSS:

.form-ok { color:green; padding-left:10px } 
.form-error { color:red; padding-left:10px } 

同样运行在线: http://jsfiddle.net/prajan55/V9RvD/

但是,该功能在负载本身上执行,即使在发生模糊之前。请帮助解决此问题。

回答

2

在你的脚本改变

bodyType.find('input').blur(validate(this));  
complexion.find('input').blur(validate(this)); 

bodyType.find('input').blur(validate);  
complexion.find('input').blur(validate); 

工作例如:​​