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

Question

У меня возникли проблемы с формой уведомления jqueryReset() с "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> 

Answer 1

1) Ваше использование e.preventDefault() является неправильным и ненужным. Если вы просто хотите заблокировать регулярную отправку формы, тогда положите return false в конце функции обратного вызова 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) The plugin's resetForm() method для сброса проверки только ... удаление любых сообщений об ошибках и возвращая форму в исходное состояние проверки. Однако он не удалит записи данных из полей.

Редактировать: Поскольку вы звоните только от 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 
} 

Работа DEMO: http://jsfiddle.net/t3dtG/

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