jquery validate：自定義驗證規則

Question

我希望這個表單只有當用戶選擇“Sí”作為select的問題的答案時才需要字段'Nombre'。 此外，如果用戶選擇“Sí”，則應提供電子郵件或電話（在teléfono中）。

我正在使用validate插件，並且沒有找到類似規則已編碼的文檔。 我該如何編碼呢？

看一下文檔，我想我需要編寫一個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>

Answer 1

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

在你的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"/>

另一個提示，永遠不要使用表格來設置頁面樣式，使用div，浮點數和百分比。

Answer 2

您可以查看他們的演示頁面，看看如何使其工作的硬編碼示例。 如果未選擇選項，則僅使用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/

jquery validate：自定義驗證規則

問題描述

2 個解決方案

解決方案1
0 2016-03-04 13:45:01

解決方案2
0 2010-09-09 18:45:49

jquery validate：自定義驗證規則

問題描述

2 個解決方案

解決方案1 0 2016-03-04 13:45:01

解決方案2 0 2010-09-09 18:45:49

解決方案1
0 2016-03-04 13:45:01

解決方案2
0 2010-09-09 18:45:49