jquery验证: custom validation rule

标签 jquery jquery-plugins jquery-validate

我希望此表单仅在用户选择“Sí”作为选择问题的答案时才需要字段“Nombre”。此外,如果用户选择“Sí”,则应提供电子邮件或电话(teléfono)。

我正在使用验证插件,但尚未找到编写了类似规则的文档。我该如何编码?

查看 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>

最佳答案

您需要创建自己的自定义规则,并将此类添加到您的两个字段中。

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

关于jquery验证: custom validation rule,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3678151/

相关文章:

javascript - 如何在 jQuery 中查找服务器上可用的文件?

jquery淡入来自ajax的html内容

jquery - jquery dataTables 插件可以在排序/过滤后尊重备用行颜色吗?

javascript - 动态添加元素,但 jquery onClick 函数不起作用(SimpleBox)

JQuery 验证奇怪的自定义方法错误

javascript - 内联换行符?

javascript - 为什么 Internet Explorer 向后显示我的 JavaScript 分页?

jquery - 将谷歌地图标记集中在厚盒中

jquery - jQuery 验证远程的错误响应不起作用

用于多个文件上传验证的 jQuery Validate 插件