使用 JQuery 验证插件进行条件验证答案

【问题标题】：Conditional Validation using JQuery Validation Plugin使用 JQuery 验证插件进行条件验证
【发布时间】：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 width="46%" class="record">
          <tr>
          <td width="21%" valign="top" class="field_name_left"><p>Question 1</p></td>
          <td width="15%" 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 width="64%" 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>

【问题讨论】：

标签： javascript jquery validation conditional

【解决方案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"

而不是他发布的内容。

谢谢你让我走上正轨！

【讨论】：