Question

我正在尝试使用jQuery验证器库，但我无法将消息显示到DOM中。我读了类似的问题，但找不到我的错误。

请注意，我还在CSS中添加了.error类。

<html>
<style>
    .error{
        color: red;
    }
</style>
<main>
    <div class="registration-mask">
        <form name="signup-advertiser" id="signup-form">
             <div class="row"><div class="col-sm-4 left"><label for="lastname">Last Name:</label></div> <div class="col-sm-10"><input type="text" name="lastname"></div></div>
            <div class="row"><div class="col-sm-4 left"><label for="password1">Password:</label></div> <div class="col-sm-10"><input type="password" name="password1"></div></div>
            <div class="row"><div class="col-sm-4 left"><label for="password">Repeat Password:</label></div> <div class="col-sm-10"><input type="password" name="password"></div></div>

            <button id="signup-btn">Sign Up!</button>
        </form>
    </div>


</main>

<!-- jQuery first, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
<script>
    $(document).ready(function () {

        $('#signup-form').validate({
            rules: {
                lastname: {
                    required: true
                },
                passwrod: {
                    equalTo: password1
                }
            },
            messages: {
                lastname: "Please enter your last name",
                password: "The passwords you entered don't match"
            }
        });

    });
</script>

</body>
</html>

Answer 1

脚本中的密码拼写错误

passwrod: {
    equalTo: password1
}

为所有输入元素提供id，如下所示它将起作用

<input type="text" id="lastname" name="lastname">
<input type="password" id="password1" name="password1">
<input type="password" id="password" name="password">

Answer 2

您可能必须像这样在错误消息中提供一些CSS属性

label { margin-left: 8px; color: black; }

jQuery验证器消息未显示

2 个答案: