通过 jqueryvalidation.org 使用单选按钮显示/隐藏 div + 验证答案

【问题标题】：Using radio button to show/hide div + validation with jqueryvalidation.org通过 jqueryvalidation.org 使用单选按钮显示/隐藏 div + 验证
【发布时间】：2015-01-28 07:55:21
【问题描述】：

我正在尝试显示/隐藏一个 div，然后在显示的 div 中进行验证，而不是验证隐藏的 div。

如果在无线电id_question 中选择了Yes，则显示div id="row_id_number" 并验证。
如果在无线电id_question 中选择了No，则显示div id="row_contact_method" 并验证。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/additional-methods.min.js"></script>

<script type="text/javascript">
            $().ready(function() {

                $("#id_frm").validate({
                    rules: {

                        "id_question": {
                           required: true
                        },
                        "id_number": {
                            required: true,
                            minlength: 10,
                            minlength: 10
                        },
                        "contact_method": {
                            required: true
                        }


                    },
                    messages: {
                        "id_question": {
                            required: "Please choose if you have an ID or not."
                        },
                        "id_number": {
                            required: "Please Enter ID."
                        },
                        "contact_method": {
                            required: "Please choose a contact method."
                        }               

                    },

            });


        });
    </script>



<style type="text/css">
.error {
    color: #F00;
}
</style>
</head>

<body>

    <form action="" id="id_frm" method="post" name="id_frm">

        <div id="row_id_question">
                <label>Do you have an ID?</label>
                <input type="radio" name="id_question" value="Yes" id="id_question">Yes &nbsp;&nbsp;&nbsp;
                <input type="radio" name="id_question" value="No" id="id_question">No<br/>
                <label for="id_question" class="error" generated="true"></label>
            </div>
        </div>

        <br/><br/>

        <!--display & validate if yes-->
        <div id="row_id_number">
                <label>Enter ID number</label>
                <input name="id_number" type="text" id="id_number" maxlength="10" value=""><br/>
                <label for="id_number" class="error" generated="true"></label>
            </div>
        </div>
        <!--end yes-->

        <br/><br/>

        <!--display & validate if no -->
        <div id="row_contact_method">
                <label>Preferred Contact Method</label><br/>
                <input type="radio" name="contact_method" value="Email" id="contact_method">Email &nbsp;&nbsp;&nbsp;&nbsp;
                <input type="radio" name="contact_method" value="Phone" id="contact_method">Phone &nbsp;&nbsp;&nbsp;&nbsp;
                <input type="radio" name="contact_method" value="Postal" id="contact_method">Postal<br/>
                <label for="contact_method" class="error" generated="true"></label>
            </div>
        </div>
        <!--end no-->

        <input type="submit" id="submit_btn" value="Submit">
    </form>


</body>
</html>

【问题讨论】：

$().ready 与$.ready 不同
jQuery Validate 自动忽略隐藏字段，因此您根本不需要更改规则。只需根据您的单选按钮显示/隐藏行，就会根据显示的内容自动进行正确的验证。

标签： jquery radio-button jquery-validate show-hide hidden

【解决方案1】：

默认情况下，jQuery Validate 插件将忽略隐藏字段（不验证隐藏的任何内容），因此只需显示/隐藏您的 div 元素并让验证自动进行。（无需对验证规则进行任何修改即可实现此目的。）

$('[name="id_question"]').on('change', function() {
    if ($(this).val() == "Yes") {
        $('#row_id_number').show();
        $('#row_contact_method').hide();
    } else {
        $('#row_id_number').hide();
        $('#row_contact_method').show();
    }
});

$("#id_frm").validate({ .... });

由于您从未说过表单最初加载时应该是什么样子，因此我已将两行隐藏起来，直到选择了收音机。您可以根据需要轻松更改 CSS...

<div id="row_id_number" style="display:none"> .... </div>

和

<div id="row_contact_method" style="display:none"> .... </div>

使用 jQuery 验证的工作演示：http://jsfiddle.net/mvzusbh7/

As per jQuery documentation，您的 DOM 就绪处理程序的语法是“不推荐”。

$().ready(function() { ....  // <- not recommended

应该是……

$(document).ready(function () { ....

或者...

$(function() { ....

您还意外地两次列出了相同的规则...

"id_number": {
    required: true,
    minlength: 10,
    minlength: 10 // <- same rule listed twice
},

【讨论】：