Using jQuery Validate with Gritter Notification

Question

I am having trouble with jquery notification formReset() with "e.preventDefault();" and gritter notifications. In my code, I am calling the eventAdd() function to the submitHandler of validator. In the eventAdd function, I am calling a gritter notification. Everything works fine except the form reset part, if I remove the e.preventDefault(). When I remove it, form doesn't get a reset and everything shows up green after submit. Here is the code for formReset and eventAdd functions (They're both wrapped in $(document).ready function and non related parts of the code are deleted for simplicity).

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();
}

I cannot think of anything to keep both the gritter and successfull resetForm functions working. Any ideas?

EDIT: HTML code

<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) Your usage of e.preventDefault() is incorrect and unnecessary. If you simply want to block the regular form submit, then put a return false at the end of the submitHandler callback function.

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

2) You are missing a comma right after your rules option.

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

3) The plugin's resetForm() method is for resetting the validation only... removing any error messages and returning the form to its initial validation state. It will not, however, remove any data entries from the fields.

Edit: Since you're only calling it from submitHandler, it will never do anything. That's because submitHandler only fires on a valid form.

Add a line with $('form').get(0).reset() if you want to clear out the fields.

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
}

Working DEMO: http://jsfiddle.net/t3dtG/

Edit: .resetForm() is only for resetting the validation (removing outstanding error messages). I removed .resetForm() above because it's superfluous in this context. The submitHandler only fires when the form is valid, therefore, there is nothing for resetForm() to do.