jquery validate:自定义验证规则
我希望此表单仅在用户选择“Sí”作为选择问题的答案时才需要字段“Nombre”。此外,如果用户选择“Sí”,则应提供电子邮件或电话(teléfono)。
我正在使用验证插件,但尚未找到编写了类似规则的文档。我该如何编码?
查看 文档,我想我需要编写 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>¿Recomendarí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í</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é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>
I want this form to make the field 'Nombre' required only if the user picks "Sí" as the answer to the select's question. Additionally, if the user selects "Sí", either an email or a phone (in teléfono) should be provided.
I'm using the validate plugin and haven't found a doc in which a similar rule has been coded. 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 =/
<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>¿Recomendarí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í</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é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>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您需要创建自己的自定义规则,并将此类添加到您的两个字段中。
在 js 文件中:
在 html 代码中,您必须将新类添加到字段中。
另一个提示,切勿使用表格来设计页面样式,而应使用 div、浮动和百分比。
you need to create your own custom rule, and add this class to your both fields.
In your js file:
And in your html code you have to add the new classes to the fields.
Another tip, never use table to styling your page, use divs, floats, and percentage.
您可以查看他们的演示页面并查看硬编码示例如何使其工作。如果未选择选择,则仅使用 javascript 禁用字段,并且当选择选择时,禁用的属性将被删除。
从演示站点复制粘贴:
http://jquery.bassistance.de/validate/demo/
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.
Copy paste from demo site:
http://jquery.bassistance.de/validate/demo/