Question

我正在使用JQuery的表单验证插件并在大多数情况下完成它。但是，我现在的问题是我无法使resetForm正常工作。我认为这可能与我放置变量声明的位置有关。

这是我的验证脚本（顺便说一下，它位于一个单独的js文件中：

var validator = $("popcornOrder");

    $(document).ready(function() {
        validator.validate({
                rules: {
                    fName:      "required",
                    lName:      "required",
                    street:     "required",
                    city:       "required",
                    state:      {required: true, state: true},
                    zip:        {required: true, ziprange: true},
                    accountNum: "required",
                    email:      {required: true, email: true},
                    pwd:        "required",
                    confPwd:    {required: true, equalTo: "#pwd"},
                    payment:    "required"
                },
                messages: {
                    fName:      "Everyone has a first name, we need to know yours.",
                    lName:      "Unless you're a rockstar, we need your last name too.",
                    street:     "Street is required.",
                    city:       "City is a required field too.",
                    state:      {required: "State is required.", state: "You need to put in proper state abbreviation"},
                    zip:        {required: "Please enter an appropriate zip code", ziprange: "Not a valid format, please try again"},
                    accountNum: "You cannot order without entering an account number.",
                    email:      {required: "We need your email address", email: "That's not an email address"},
                    pwd:        "A password is required.",
                    confPwd:    {required: "You already entered it once, can you do it again?", equalTo: "Does not match"},
                    payment:    "Please enter a payment type."

                },
                highlight:
                    function(element) {
                        $(element).addClass('errorBorder');
                    },
                unhighlight:
                    function(element) {
                        $(element).removeClass('errorBorder').prop("title", "");
                    },
                invalidHandler: function(form, validator) {
                    var errors = validator.numberOfInvalids();
                        if (errors) {
                             var message = errors == 1
                                ? 'You missed 1 field. It has been highlighted'
                                : 'You missed ' + errors + ' fields. They have been highlighted. Hover mouse over input for specfic error info.';
                             $("div.error span").html(message);
                             $("div.error").show();
                             } else {
                            $("div.error").hide();
                        }
                 },
                 focusInvalid: false,
                 errorPlacement: function(error, element) {
                    $(element).prop("title", error.text());
                 }
        });
    });

然后，在表单HTML本身上，我只是将相应的js文件拉入：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/mmiller.js"></script>

现在，我底部有两个按钮，如下所示：

<input type="image" name="submit" id="submit" src="img/submit-btn.jpg" width="74" height="77" />
        <input type="image" name="clear" id="clear" src="img/clear-btn.jpg" width="119" height="77" onclick="validator.resetForm();" />

问题是，在我添加var validator = $("popcornOrder");之前，提交按钮实际上导致验证触发并且表单正确响应。（此时我只是$("popcornOrder").validate ({ rules: ...});

无论如何，现在我实际创建了验证器，无论是单击“提交”按钮还是“清除”按钮，表单都会被清除。是什么给了什么？

Answer 1

“图像”的输入类型充当提交按钮。

浏览器可能会对哪一个提交以及哪一个重置感到困惑。不要对两个按钮使用input type =“image”，而是将其用于提交按钮，并使用input type =“reset”作为“clear”按钮。

如果您必须拥有图片，请使用CSS来设置图片，或者只是装配“img”标签或“a”标签来重置图片。两者都是简单的替代品。

Answer 2

您需要验证程序的实例才能调用resetForm()方法。你可以这样做有两种方式：

实际上validator.validate()会返回验证程序实例，您可以从中调用resetForm()。

var validator = $("popcornOrder");
var validatorInst;

    $(document).ready(function() {
        validatorInst = validator.validate({
                rules: {
                    fName:      "required",
                    .
                    .
                    .

现在只需在onclick="validatorInst.resetForm();"代码上致电<img />。

或者

您只需致电onclick="validator.validate().resetForm();"即可。这也可以。

Answer 3

我能够通过以下方式实现这一目标： 1.）更改按钮类型以重置（而不是图像）; 2.）使用CSS将其设计为我想要的图像; 3.）创建一个函数，删除输入上的错误类以及错误消息div。 4.）将该函数添加到重置按钮的onClick（）事件中：

function clearForm(){
    $('input').removeClass('errorBorder').prop('title', '');
    $('div.error').hide();
}

.....

<input type="reset" name="reset" id="reset" class="buttonReset" onclick="clearForm();"  />

再次感谢您的帮助！

JQuery Validation插件 - 无法使resetForm工作

3 个答案:

或者