Использование jQuery Validate с Gritter Notification

0

У меня возникла проблема с уведомлением jquery formReset() с надписью "e.preventDefault();" и уведомления о песне. В моем коде я вызываю функцию eventAdd() в submitHandler проверки. В функции eventAdd я вызываю уведомление о песке. Все работает отлично, кроме части сброса формы, если я удалю e.preventDefault(). Когда я удаляю его, форма не получает сброс, и после отправки появляется все зеленые. Вот код для функций formReset и eventAdd (они оба завернуты в функцию $ (document).ready и неотделимые части кода удаляются для простоты).

var form1 = $('#form1');
var error1 = $('.alert-error', form1);
var success1 = $('.alert-success', form1);

var validator = form1.validate({
    errorElement: 'span', //default input error message container
    errorClass: 'help-inline', // default input error message class
    focusInvalid: false, // do not focus the last invalid input
    ignore: "",
    rules: {
        title: {
            minlength: 2,
            required: true
        },
        description: {
            minlength: 2,
            required: true
        },
        Date: {
            required: true,
            trDate: true
        },
        time_Begin: {
            required: true,
            trHour: true,
        },
        time_End: {
            required: true,
            trHour: true,
        }
    },

    errorPlacement: function (error, element) {
        if (element.next().is('.add-on')) {
            error.addClass('class1').insertAfter(element.next('.add-on'));
        } else {
            error.insertAfter(element);
        }
    },

    invalidHandler: function (event, validator) { //display error alert on form submit              
        success1.hide();
        error1.show();
        App.scrollTo(error1, -200);
    },

    highlight: function (element) { // hightlight error inputs
        $(element)
            .closest('.help-inline').removeClass('ok'); // display OK icon
        $(element)
            .closest('.control-group').removeClass('success').addClass('error'); // set error class to the control group
    },

    unhighlight: function (element) { // revert the change done by hightlight
        $(element).closest('.control-group').removeClass('error'); // set error class to the control group
    },

    success: function (label) {
        label.addClass('valid').addClass('help-inline ok') // mark the current input as valid and display OK icon
        .closest('.control-group').removeClass('error').addClass('success'); // set success class to the control group
    },

    submitHandler: function (form) {
        eventAdd();
    }
});

function eventAdd() {
    $.gritter.add({
         title: 'SUCCESS!',
         text: 'Event saved successfully.',
         sticky: false,
         time: '10000'
    })

    e.preventDefault();   // That is preventing the gritter notification
    validator.resetForm();
}

Я не могу придумать ничего, чтобы работать как с песком, так и с успешными функциями resetForm. Есть идеи?

EDIT: HTML-код

<form id="form1">
    <div class="alert alert-error hide">
        <button class="close" data-dismiss="alert"></button>
        Please fix the error fields.
    </div>
    <div class="alert alert-success hide">
        <button class="close" data-dismiss="alert"></button>
        All fields are OK. You can save your event.
    </div>

    <div class="control-group">
        <div class="controls">
            <input id="event_title" name="title" data-required="1" type="text" value="" class="m-wrap span11 tooltips" placeholder="Event Title..." data-trigger="hover" data-original-title="Write your event description." data-placement="bottom" />

        </div>
    </div>

    <div class="control-group">
        <div class="controls">
            <textarea id="event_description" name="description" data-required="1" class="m-wrap span11 tooltips" placeholder="Event Description..." rows="5" style="resize: vertical;" data-trigger="hover" data-original-title="Etkinlik açıklamanızı yazarken HTML etiketleri kullanabilirsiniz. Açıklamanızı en fazla 1000 karakter (HTML etiketleri dahil) olarak girin." data-placement="bottom"></textarea>

        </div>
    </div>

    <div class="control-group">
        <div class="controls">
            <div class="input-append" id="ui_date_picker_trigger">
                <input id="ui_date_picker_change_date" name="Date" data-required="1" placeholder="Event Date" class="m-wrap span6" type="text" value="" />
                <span class="add-on"><i class="icon-calendar"></i></span>
            </div>
        </div>
    </div>

    <div class="control-group">
        <div class="controls">
            <div class="input-append" id="ui_time_picker_trigger_Begin">
                <input id="ui_date_picker_change_time_Begin" name="time_Begin" placeholder="Event Begins" class="m-wrap span6" type="text" value="" /><span class="add-on"><i class="icon-time"></i></span>
            </div>
        </div>
    </div>

    <div class="control-group">
        <div class="controls">
            <div class="input-append" id="ui_time_picker_trigger_End">
                <input id="ui_date_picker_change_time_End" name="time_End" placeholder="Event Ends" class="m-wrap span6" type="text" value="" data-placement="top" /><span class="add-on"><i class="icon-time"></i></span>
            </div>
        </div>
    </div>

    <hr />
    <button id="event_add" type="submit" class="btn blue tooltips" style="float: left;"><i class="icon-ok"></i>&nbsp;Add Event</button>
    <button id="event_nullify" type="submit" class="btn yellow tooltips" style="float: right;"><i class="icon-refresh"></i>&nbsp;Cancel</button>
</form>
  • 0
    Это не то, для чего preventDefault() . Он предназначен для предотвращения поведения определенных событий по умолчанию, например, для остановки истории при нажатии на ссылку привязки. И это ничего не делает, если вы пренебрегаете передачей аргумента event ( e ) в функцию. Смотрите документацию: api.jquery.com/event.preventDefault
  • 0
    Также покажите более полную демонстрацию вашего кода. (где ваша HTML-разметка?)
Показать ещё 4 комментария
Теги:
jquery-validate
preventdefault

1 ответ

1
Лучший ответ

1) Ваше использование e.preventDefault() неверно и не нужно. Если вы просто хотите заблокировать регулярную форму submit, тогда положите return false в конце submitHandler обратного вызова submitHandler.

    submitHandler: function (form) {
        eventAdd();
        return false; // block form submit
    }

2) Вам не хватает запятой сразу после вашего правила.

    rules: {
        title: {
            minlength: 2,
            required: true
        },
        description: {
            minlength: 2,
            required: true
        }
    }, // <-- this comma was missing

3) Метод plugin resetForm() предназначен для сброса только проверки... удаления любых сообщений об ошибках и возврата формы в исходное состояние проверки. Однако он не удалит записи данных из полей.

Изменение: поскольку вы только вызываете его из submitHandler, он никогда ничего не сделает. Это потому, что submitHandler только срабатывает в действительной форме.

Добавьте строку с $('form').get(0).reset() если вы хотите очистить поля.

function eventAdd() {
    $.gritter.add({
       title: 'SUCCESS!',
       text: 'Event saved successfully.',
       sticky: false,
       time: '10000'
    });
    // validator.resetForm();     // reset validation - superfluous here
    $('form').get(0).reset();     // clear the fields
}

Рабочий ДЕМО: http://jsfiddle.net/t3dtG/

Изменить: .resetForm() предназначен только для сброса проверки (удаление выдающихся сообщений об ошибках). Я удалил .resetForm() выше, потому что в этом контексте он лишний. Функция submitHandler только в том случае, если форма действительна, поэтому для resetForm() ничего не нужно делать.

  • 0
    . $ ( 'Форма') получаем (0) .RESET (); как я решил сброс записи формы. Но validator.resetForm (); ничего не делает в моем случае. Я решил проблему с раскрашиванием ошибок и успехов, удалив классы из div-элементов контрольной группы на $ ('. Control-group'). RemoveClass ('error'). RemoveClass ('success'); код. Спасибо за помощь, хотя! Вы указали мне правильное направление :) Как вы думаете, validator.resetForm (); не получилось?
  • 0
    @ilter, как объяснено в моем ответе, это метод сброса валидатора ... он только удаляет неподтвержденные сообщения валидации и сбрасывает валидацию формы ... он работает нормально, но вы думаете, что он не работает, потому что у вас нет ошибок в форме , Другими словами, в вашем случае он ничего не сделает, так как submitHandler срабатывает только тогда, когда форма действительна.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню