jQuery验证：不显示错误[重复]

Question

我在我的代码中添加了 jQuery Validation，并且每个字段的自定义消息都没有显示。我只是在验证字段上看到一个红色框和一个默认弹出窗口：“这是一个必填字段”。

请看代码：

<script src="~/Scripts/jquery-1.10.2.intellisense.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#form").validate({
                rules: {
                    firstname: {
                        required: true
                    },
                    lastname: {
                        required: true
                    },
                    email: {
                        required: true
                    },
                    message: {
                        required: true
                    }
                },
                messages: {
                    firstname: "Enter your first name",

                    lastname: "Enter your last name",

                    email: "Enter your email",

                    message: "Enter the message"

                },
            });
        });


    </script>


<form id="form" action="" method="post">
    <fieldset>
        <label for="firstname">First name: </label>  
        <input type="text" name="firstname" id="firstname" required /> <br />
    </fieldset>
    <fieldset>
        <label for="lastname">Last name: </label>
        <input type="text" name="lastname" id="lastname" required /> <br />
    </fieldset>
    <fieldset>
        <label for="email">Email: </label>
        <input type="email" name="email" id="email" required /> <br />
    </fieldset>
    <fieldset>
        <label for="message">Message: </label>
        <textarea name="message" id="message" required ></textarea>
    </fieldset>
    <input type="submit" id="submit" value="Submit"/>
</form>

感谢您的帮助。

Answer 1

多次包含 js 文件是个问题。另外，请确保您对 validate.js 有正确的引用。

.mr15{
  margin-right:15px;
}

label.error{
color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#form").validate({
                rules: {
                    firstname: {
                        required: true
                    },
                    lastname: {
                        required: true
                    },
                    email: {
                        required: true
                    },
                    message: {
                        required: true
                    }
                },
                messages: {
                    firstname: "Enter your first name",

                    lastname: "Enter your last name",

                    email: "Enter your email",

                    message: "Enter the message"

                },
            });
        });


    </script>


<form id="form" action="" method="post">
    <fieldset>
        <label for="firstname">First name: </label>  
        <input type="text" name="firstname" id="firstname" class="mr15" required /> <br />
    </fieldset>
    <fieldset>
        <label for="lastname">Last name: </label>
        <input type="text" name="lastname" id="lastname" class="mr15" required /> <br />
    </fieldset>
    <fieldset>
        <label for="email" >Email: </label>
        <input type="email" name="email" id="email" class="mr15" required /> <br />
    </fieldset>
    <fieldset>
        <label for="message">Message: </label>
        <textarea name="message" id="message" class="mr15" required ></textarea>
    </fieldset>
    <input type="submit" id="submit" value="Submit"/>
</form>