Question

我正在尝试显示/隐藏div，然后在显示的div中验证并且不验证隐藏的div。

如果在广播Yes中选择id_question，则显示div id="row_id_number"＆amp;验证
如果在广播No中选择id_question，则显示div id="row_contact_method"＆amp;验证

<!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>

Answer 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验证工作DEMO：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
},

使用单选按钮显示/隐藏div +验证与jqueryvalidation.org

1 个答案: