jquery - グリッター通知で jQuery Validate を使用する

Question

「e.preventDefault();」で jquery 通知 formReset() に問題があります。グリッター通知。私のコードでは、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関数の両方を機能させ続けるために何も考えられません。何か案は？

編集: 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>