Question

所以这段代码看起来很好，我似乎无法看到错误的来源。它在$（document）.ready（function（）{。

中正确包装

$("#signup-form").validate({
    rules: {
        firstname: 'required',
        signup-email: 'required',
        signup-password: 'required',
        signup-password-v: 'required'
    },
    messages: {
        firstname: 'Your firstname is required!',
        signup-email: 'Your email is required!',
        signup-password: 'A password is required!',
        signup-password-v: 'Please verify your password!'
    }
});

我在html head标签中的jquery库之后调用jquery.validate所以有什么想法吗？

HTML

<!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>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel='stylesheet' type='text/css' href='./css/index.css' />
        <script type="text/javascript" src="./js/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="./js/jquery.validate.js"></script>
        <script type="text/javascript" src="./js/index.js"></script>
    </head>
    <body>
        <div id="navbar">
            <div id="title">CrockShark.com</div>
        </div>
        <div id="container">
            <div id="navcontainer">
                <ul id="navlist">
                    <li>Find great Crockpot recipes</li>
                    <li>Save 'em</li>
                    <li>Post your own</li>
                    <li>See how many people like yours</li>
                </ul>
            </div>
            <div id="signup">
                <form id="signup-form">
                <label>First Name:</label>
                    <input type="text" class="signup-input" id ="firstname" name="firstname" /><br />
                <label>Last Name:</label>
                    <input type="text" class="signup-input" id="lastname" name="lastname" /><br />
                <label>Birthday:</label>
                    <select id="month" name="month">
                        <option value="1">January</option>
                        <option value="2">February</option>
                        <option value="3">March</option>
                        <option value="4">April</option>
                        <option value="5">May</option>
                        <option value="6">June</option>
                        <option value="7">July</option>
                        <option value="8">August</option>
                        <option value="9">September</option>
                        <option value="10">October</option>
                        <option value="11">November</option>
                        <option value="12">December</option>
                    </select>
                    <select id="day" name="day">
                        <?php for ($i=1; $i<=31; $i++) { echo "<option value='$i'>$i</option>"; } ?>
                    </select>
                    <select id="year" name="year">
                        <?php for ($i=2012; $i>=1900; $i=$i-1) { echo "<option value='$i'>$i</option>"; } ?>
                    </select><br />
                <label>Email:</label>
                    <input type="text" class="signup-input" id="signup-email" name="signup-email" /><br />
                <label>Password:</label>
                    <input type="password" class="signup-input" id="signup-password" name="signup-password" /><br />
                <label>Verify Password:</label>
                    <input type="password" class="signup-input" id="signup-password-v" name="signup-password-v" /><br />
                    <input type="button" id="signup-button" name="signup-button" value="Join!" />
            </form>
            </div>
            <div id="login">
                <div id="login-wrapper">
                    <label>Email:</label><input type="text" class="login" id="login-email" /><br />
                    <label>Password:</label><input type="password" class="login" id="login-password" />
                    <input type="button" id="login-button" value="Login" /> 
                </div>
            </div>
        </div>
    </body>
</html>

Answer 1

您无法在属性名称中使用破折号：

signup-email: 'Your email is required!',

我认为你可以用引号包装这些属性，并获得你想要的效果：

'signup-email': 'Your email is required!',

Answer 2

这是jquery验证插件文档。参考

http://docs.jquery.com/Plugins/Validation/Reference#Fields_with_complex_names_.28brackets.2C_dots.29

如果您的表单包含使用非合法JavaScript标识符的名称的字段，则在使用rules选项时必须引用这些名称：

$("#myform").validate({
  rules: {
    // no quoting necessary
    name: "required",
    // quoting necessary!
    "user[email]": "email",
    // dots need quoting, too!
    "user.address.street": "required"
  }
});

Answer 3

尝试简化检查脚本

$(document).ready(function(){
$("#signup-form").validate();
});

提到一些要点： -

您需要确保提交表单。
确保您提交的提交类型为
在输入中添加必填字段

缺少Jquery.validate：属性id之后

3 个答案: