JQuery Validation Plugin - Невозможно заставить resetForm работать

Question

Я использую плагин JQuery Form Validation и пробираюсь через него по большей части. Однако сейчас моя проблема в том, что я не могу заставить 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

Вам нужен экземпляр валидатора, чтобы вызвать метод 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 2

Тип ввода «image» действует как кнопка отправки.

В браузере может возникнуть путаница относительно того, какой из них отправляется, а какой сбрасывается.Вместо того, чтобы использовать input type = "image" для обеих кнопок, используйте его для кнопки отправки и используйте input type = "reset" для кнопки "clear".

Если у вас должно быть изображение, создайте его стиль с помощьюCSS вместо этого, или просто установите тег «img» или «a» для сброса формы.Оба являются простыми альтернативами.

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();"  />

Еще раз спасибо за помощь!