2010-09-09 198 views
4

我希望此表單僅在用戶選擇「Sí」作爲select的問題答案時才需要該字段爲「Nombre」。另外,如果用戶選擇「Sí」,則應該提供電子郵件或電話(在teléfono中)。jquery驗證:自定義驗證規則

我正在使用驗證插件,但沒有找到類似規則已被編碼的文檔。我如何編碼?

看着the documentation,我想我需要代碼,通過使用required(dependency-expression)required(dependency-callback)的方法,但我沒有這或如何,點擊自己的文檔出現缺失的方法=/

<html> 
<head> 

<style type="text/css"> 

label { width: 10em; float: left; } 
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; } 
p { clear: both; } 

em { font-weight: bold; padding-right: 1em; vertical-align: top; } 
</style> 



    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> 

    <link rel="stylesheet" type="text/css" media="screen" href="mistylesheet.css" /> 
<script> 
    $(document).ready(function(){ 
    $("#commentForm2").validate(); 
    }); 


    </script> 

</head> 
<body> 
<form id="commentForm2"> 

    <center><table class="layouttable"> 

     <tr class='row1'><td> <b>&#191;Recomendar&iacute;a nuestros servicios a otra empresa o persona? </b></td></tr> 
     <tr class='row2'><td> 



     <select id = "recomiendaONo" name="recomiendaONo" class="required"> 
      <option value="">Seleccione su respuesta</option> 
      <option value="Si">S&iacute;</option> 
     <option value="No">No</option> 

     </select> 



     </td></tr> 


    </table></center>  






<div class='margenrecomendaciones'> 
<table> 

<tbody> 


<tr> 



<td><div align="left">Nombre:</div></td> 

<td><div align="left"><input class="texto" id="nombreRecomendado" name="nombreRecomendado" type="text" size="30"/></div></td> 

</tr>  




<td><div align="left">Email:</div></td> 

<td><div align="left"> <input class="texto" id="emailRecomendado" name="emailRecomendado" type="text" size="30"/></div></td> 




</tr> 

<tr> 



<td><div align="left">Tel&eacute;fono:</div></td> 

<td><div align="left"> <input class=" texto" name="telefonoRecomendado" id="telefonoRecomendado" type="text" size="30"/></div></td> 




</tr> 


</tbody> 

</table> 
</div> 


    <center><input type="submit"></center> 


</form> 
</body> 
</html> 

回答

0
時,因爲

你可以看看他們的演示頁面,看看硬編碼的例子如何使這項工作。如果未選擇選擇項,並且選擇了選擇項,則只會禁用javascript字段,禁用的屬性將被刪除。

從演示站點複製粘貼:

//code to hide topic selection, disable for demo 
var newsletter = $("#newsletter"); 
// newsletter topics are optional, hide at first 
var inital = newsletter.is(":checked"); 
var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray"); 
var topicInputs = topics.find("input").attr("disabled", !inital); 
// show when newsletter is checked 
newsletter.click(function() { 
    topics[this.checked ? "removeClass" : "addClass"]("gray"); 
    topicInputs.attr("disabled", !this.checked); 
}); 

http://jquery.bassistance.de/validate/demo/

+0

謝謝,但這不是我要找的。 – andandandand 2010-09-09 20:25:59

0

您需要創建自己的自定義規則,這個類添加到您的這兩個字段。

在你的js文件:

jQuery.validator.addMethod("newRuleOr", function(value, element) { 
     if($('#recomiendaONo').val() == 'Si'){ 
      return $('#emailRecomendado').val() != '' && $('#telefonoRecomendado').val(); 
     } 
     return true; 
    }, "Telefono o mail deben informarse." 
); 

而在你的HTML代碼,你必須將添加新的類的字段。

<input class="texto newRuleOr" id="nombreRecomendado" name="nombreRecomendado" type="text" size="30"/> 
... 
<input class="texto newRuleOr" id="emailRecomendado" name="emailRecomendado" type="text" size="30"/> 

另一個提示,從不使用表格來設計你的頁面,使用divs,float和百分比。