jquery驗證：自定義驗證規則

我希望此表單僅在用戶選擇「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>

來源

2010-09-09 andandandand

時，因爲

你可以看看他們的演示頁面，看看硬編碼的例子如何使這項工作。如果未選擇選擇項，並且選擇了選擇項，則只會禁用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/

來源

2010-09-09 18:45:49 newbie

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

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

在你的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和百分比。

來源

2016-03-04 13:45:01 cralfaro

jquery驗證：自定義驗證規則

回答

相關問題