使用 JQuery 验证插件进行条件验证
Posted
技术标签:
【中文标题】使用 JQuery 验证插件进行条件验证【英文标题】：Conditional Validation using JQuery Validation Plugin 【发布时间】：2011-02-21 04:07:30 【问题描述】：我有一个简单的 html 表单，我在使用 JQuery Validation 插件时添加了验证。我让它适用于需要一个值的单个字段。我现在需要扩展它，以便如果用户对问题回答“是”，他们必须在“详细信息”字段中输入内容，否则“详细信息”字段可以留空。我正在使用单选按钮来显示是/否。这是我完整的 html 表单 - 我不知道从哪里开始：
<script type="text/javascript" charset="utf-8">
$.metadata.setType("attr", "validate");
$(document).ready(function()
$("#editRecord").validate();
);
</script>
<style type="text/css">
.block display: block;
form.cmxform label.error display: none;
</style>
</head>
<body>
<div id="header">
<h1>
Questions</h1>
</div>
<div id="content">
<h1>
Questions Page 1
</h1>
</div>
<div id="content">
<h1>
</h1>
<form class="cmxform" method="post" action="editrecord.php" id="editRecord">
<input type="hidden" name="-action" value="edit">
<h1>
Questions
</h1>
<table class="record">
<tr>
<td valign="top" class="field_name_left"><p>Question 1</p></td>
<td valign="top" class="field_data">
<label for="Yes">
<input type="radio" name="Question1" value="Yes" validate = "required:true" /> Yes
</label>
<label for="No">
<input type="radio" name="Question1" value="No" /> No
</label>
<label for="Question1" class="error">You must answer this question to proceed</label>
</td>
<td valign="top" class="field_data"><strong>Details:</strong>
<textarea id = "Details1" class="where" name="Details1" cols="25" rows="2"></textarea></td>
</tr>
<tr>
<td valign="top" class="field_name_left">Question 2</td>
<td valign="top" class="field_data">
<label for="Yes">
<input type="radio" name="Question2" value="Yes" validate = "required:true" /> Yes
</label>
<label for="No">
<input type="radio" name="Question2" value="No" /> No
</label>
<label for="Question2" class="error">You must answer this question to proceed</label>
</td>
<td valign="top" class="field_data"><strong>Details:</strong>
<textarea id = "Details2" class="where" name="Details2" cols="25" rows="2"></textarea> </td>
</tr>
<tr class="submit_btn">
<td colspan="3">
<input type="submit" name="-edit" value="Finish">
<input type="reset" name="reset" value="Reset"> </td>
</tr>
</table>
</form>
</div>
</body>
</html>
【问题讨论】：
【参考方案1】：在您的<textarea> 元素上，为required 添加dependency expression，例如对于问题1，执行以下操作：
validate="required:'input[name=Question1][value=Yes]:checked'"
这表示如果$('input[name=Question1][value=Yes]:checked').length > 0 则该字段为必填项，因此如果选中“是”，则为必填项:)
You can see a working demo here
【讨论】：
感谢您的回答。我已将代码添加到 @Steve - 这是您的代码，上面添加了我在上面添加并运行的代码，请确保引号和所有内容都正确：jsfiddle.net/H2YLp 好的，谢谢，太好了，我现在可以正常工作了。感谢您的帮助，没有意识到实现这一点将是一个非常简单的更改。这确实是一个额外的问题，但我还想让 textarea 输入字段的标签在用户单击“是”以表明这是一个必填字段后将颜色更改为红色。单击否将保持黑色。因此，如果用户为问题 1 单击“是”，则问题 1 的 Details: 将颜色变为红色。有什么想法吗？ @Steve - 这将是这些元素的.change() 处理程序，这是一个示例，请注意我如何更改标签...这应该是您的 <label> 元素与您的 @987654332 的关系@元素 :) jsfiddle.net/8J3K6
谢谢尼克 - 在单选按钮输入中更改了“是”的标签。如果相应的答案是“是”，我想要做的是更改“详细信息”的标签。因此，用户对问题 1 单击“是”，详细信息标签变为红色。同样为答案选择“是”并尝试提交会按预期在详细信息文本区域下显示错误。但是，如果您将答案更改为“否”，它不会删除 textarea 字段下的错误标签 - 如果显示“否”，您是否知道是否有办法将其删除？【参考方案2】：
你可以这样做：
$("#editRecord").validate(
rules:
'Details1':
required: function()
return $('input[name=Question1]').val() == 'yes';
'Details2':
required: function()
return $('input[name=Question2]').val() == 'yes';
);
【讨论】：
Javascript 区分大小写，尤其是字符串；) 好的，谢谢，太好了，我现在可以正常工作了。这确实是一个额外的问题，但我还想让 textarea 输入字段的标签在用户单击“是”以表明这是一个必填字段后将颜色更改为红色。单击否将保持黑色。因此，如果用户为问题 1 单击“是”，则问题 1 的 Details: 将颜色变为红色。有什么想法吗？ 你可以使用 $(element).on('change' function () //change border here );还要感谢这个答案 - 发现它比接受的答案更简单，因为我的问题略有不同。【参考方案3】：针对 Nick Craver 的上述建议回复，我发现正确的语法是：
class="validate[required][name=Question1][value=Yes]:checked"
而不是他发布的内容。
谢谢你让我走上正轨！
【讨论】：
以上是关于使用 JQuery 验证插件进行条件验证的主要内容，如果未能解决你的问题，请参考以下文章