Question

我有一个非常典型的jQuery验证表单示例，但它似乎不起作用。这是我的代码：

<html>
<head>
<meta charset="utf-8">
<title>Makes "field" required and 13 or larger.</title>
<link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css">
</head>
<body>
    <h3>Contact Form</h3>
    <form method="POST" class="form-horizontal" id="contact-form" action="">
        <div class="control-group">
            <label class="control-label" for="name">Name</label>
            <div class="controls">
                <input type="text" name="name" id="name" placeholder="Your name" size="50">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="email">Email Address</label>
            <div class="controls">
                <input type="text" name="email" id="email" placeholder="Your email address" size="50">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="message">Message</label>
            <div class="controls">
                <textarea name="message" id="message" rows="8" cols="52" class="span5" placeholder="The message you want to send to us."></textarea>
            </div>
        </div>
        <div class="control-group">
            <?php
                $var1 = rand(1,20);
                $var2 = rand(1,20);
                $sum = $var1 + $var2;
            ?>
            <label class="control-label" for="captcha">Please enter the result of <?php echo $var1.' + '.$var2.' ='; ?>
            </label>
            <input type="text" id="captcha" name="captcha"><br/>
        </div>
        <br/>
        <div class="form-actions">
            <input type="hidden" name="save" value="contact">
            <button type="submit" name="contact-submit" class="btn btn-success">Submit Message</button>
            <button type="reset" class="btn">Cancel</button>
        </div>
    </form>
</body>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script>
$(document).ready(function() {
    $("#contact-form").validate({
        rules: {
            name: {
                minlength: 2,
                required: true
            },
            email: {
                required: true,
                email: true
            },
            message: {
                minlength: 2,
                required: true
            }
            captcha: {
                required: true,
                min: <?php echo $sum; ?>,
                max: <?php echo $sum; ?>
            }
        },
        highlight: function (element) {
            $(element).closest('.control-group').removeClass('success').addClass('error');
        },
        success: function (element) {
            element.text('OK!').addClass('valid')
                .closest('.control-group').removeClass('error').addClass('success');
        });
        jQuery.extend(jQuery.validator.messages, {
            min: jQuery.validator.format("Wrong answer."),
            max: jQuery.validator.format("Wrong answer.")
        });
    });
});
</script>

唯一需要注意的是我的简单验证码。我使用2个php变量及其总和来检查垃圾邮件发送者是否尝试联系。当我单击“提交”按钮时，浏览器只是刷新而没有其他任何事情发生，没有生成错误。但是，单击“取消”按钮可以重置表单。我已经搜索了有关为什么jQuery验证不起作用但无法弄清楚我的情况的现有问题。请帮我解决一下。任何帮助表示赞赏。提前谢谢。

Answer 1

根据@Juhana的建议，我使用了我的代码并找到了另一种方法来使我的代码工作。我刚换了：

jQuery.extend(jQuery.validator.messages, {
            min: jQuery.validator.format("Wrong answer."),
            max: jQuery.validator.format("Wrong answer.")

通过

messages: {
            captcha: {
                min: "Wrong answer",
                max: "Wrong answer"
            }
        }

感谢您的帮助。

Answer 2

由于您已将jQuery.extend()置于.validate()方法之内，因此您正在打破它;并且你不正确地包括一个右括号和分号，其中只能有一个逗号。

$("#contact-form").validate({
    // options...
    ....,
    success: function (element) {
        ....
    }); // <- ');' is not valid here.  Options must be separated by commas
    jQuery.extend(jQuery.validator.messages, {  // <- this is not a valid option!
        min: jQuery.validator.format("Wrong answer."),
        max: jQuery.validator.format("Wrong answer.")
    });
});

只有 the options provided by the developer 才能进入.validate()方法。

$("#contact-form").validate({
    // options...
    ....,
    success: function (element) {
        ....
    }, // <- options must be separated by commas
    messages: { // <- valid option
        captcha: {
            min: "Wrong answer",
            max: "Wrong answer"
        }
    }
});

jQuery验证不起作用？

2 个答案: