jquery validate：自定义验证规则

Question

I want this form to make the field 'Nombre' required only if the user picks "Sí" as the answer to the select's question. 我希望这个表单只有当用户选择“Sí”作为select的问题的答案时才需要字段'Nombre'。 Additionally, if the user selects "Sí", either an email or a phone (in teléfono) should be provided. 此外，如果用户选择“Sí”，则应提供电子邮件或电话（在teléfono中）。

I'm using the validate plugin and haven't found a doc in which a similar rule has been coded. 我正在使用validate插件，并且没有找到类似规则已编码的文档。 How can I code this? 我该如何编码呢？

Looking at the documentation , I think I need to code either a required(dependency-expression) or required(dependency-callback) method, but I don't which or how, since when clicking the methods their documentation appears missing =/ 看一下文档，我想我需要编写一个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

you need to create your own custom rule, and add this class to your both fields. 您需要创建自己的自定义规则，并将此类添加到两个字段中。

In your js file: 在你的js文件中：

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

And in your html code you have to add the new classes to the fields. 在您的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"/>

Another tip, never use table to styling your page, use divs, floats, and percentage. 另一个提示，永远不要使用表格来设置页面样式，使用div，浮点数和百分比。

Answer 2

You can look at their demo page and see hardcoded example how to make this work. 您可以查看他们的演示页面，看看如何使其工作的硬编码示例。 Fields are just disabled with javascript, if selection is not selected, and when selection is selected disabled attributes are removed. 如果未选择选项，则仅使用javascript禁用字段，并且选择选择时，将删除禁用的属性。

Copy paste from demo site: 从演示站点复制粘贴：

//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/ 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