Question

我正在尝试将jQuery与Validate插件一起使用，除非我无法显示错误。下面是我正在使用的代码。我已经阅读了文档，并且无法判断是否因为.validate配置不正确，或者是否与我的错误在css布局的几个div之内有关。在此先感谢您的帮助。

<script type="text/javascript">
$(document).ready(function() {
    $("#order_form").validate({
        debug:true, 
        errorContainer: "#errors",
        errorLabelContainer: "#errors ul",
        wrapper:"li",
        onsubmit:true,
        rules: {
            business_name: {
            required: true
        }

    },
    messages: {
        business_name: {
            required: "Please enter a valid business name or select &quot;Individual&quot; from above"
        }
    }
});

});
</script>
</head>
<body>

<div id="wrapper">
<div id="logo">
    <img src="images/RPP7.png" />       
</div>
<div id="menu">
    <ul>
        <li class="current_page_item"><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="videos.html">Videos</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</div>
<div id="content">
    <div class="post">
        <h2 class="title">Order Now</h2>
        <div class="entry">
            <font size="-1">Note: This page is viewed correctly with Javascript enabled.</font>
            <div id="errors">
<p>One or more things went wrong:</p
    <ul></ul>
</div>
            <form id="orderForm" method="get" action="">
                    <label for="t_business"><input type="radio" name="business" value="business" id="t_business" />Business</label>
                <label for="t_individual"><input type="radio" name="indiv" value="indiv" id="t_individual" />Individual</label><br />
                <div id="business">
                    <label for="business_name">Business Name: </label><br /><input type="text" name="business_name" /><br />
                </div>

              <label for="f_name">First Name: *</label><br /><input type="text" id="f_name" /><br />
                <label for="l_name">Last Name: *</label><br /><input type="text" id="l_name"  /><br /><br />
                <label>Preferred Method of Contact: *</label>
                <label for="p_phone"><input type="radio" name="contact" id="p_phone" />Phone</label>
                <label for="p_email"><input type="radio" name="contact" id="p_email" />E-Mail</label><br />
                <div id="contact_phone">
                    <label for="phone_nr">Phone Number: </label><br /><input type="text" name="phone_nr" /><br />
                </div>
                <div id="contact_email">
                    <label for="email_add">E-mail Address: </label><br /><input type="text" name="email_add" /><br />
                </div>
                <br />
                <label>Project Type: </label><br />
                    <label for="v_school"><input type="radio" name="project" id="v_school" />School Project</label><br />
                    <label for="v_business"><input type="radio" name="project" id="v_business" />Business Video</label><br />
                    <label for="v_personal"><input type="radio" name="project" id="v_personal" />Personal Video</label><br />
                    <label for="v_collection"><input type="radio" name="project" id="v_collection" />Photo Collection</label><br />
                    <label for="v_other"><input type="radio" name="project" id="v_other" />Other...</label><br />
              <div id="v_other_info">
                    <label>Please Specify: </label><br />
                    <input type="text" name="v_other_info" />
              </div>
                <label>Additional Information: </label><br />
                <textarea rows="5" cols="30" name="add_info"></textarea><br />
                <input class="submit" type="submit" value="Submit" />
            </form>  
        </div>
    </div>
</div>

Answer 1

你的选择器错了。

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

应该是：

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

事实上，如果你打开调试器（Firebug或类似的），你会看到以下消息：

没有选择，无法验证，不返回任何内容

jQuery验证由于嵌套的div而未显示的错误？

1 个答案: