Using jQuery Validate with Gritter Notification -
i having trouble jquery notification formreset() "e.preventdefault();" , gritter notifications. in code, calling eventadd() function submithandler of validator. in eventadd function, calling gritter notification. works fine except form reset part, if remove e.preventdefault(). when remove it, form doesn't reset , shows green after submit. here code formreset , eventadd functions (they're both wrapped in $(document).ready function , non related parts of code deleted 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, // not focus 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 control group }, unhighlight: function (element) { // revert change done hightlight $(element).closest('.control-group').removeclass('error'); // set error class control group }, success: function (label) { label.addclass('valid').addclass('help-inline ok') // mark current input valid , display ok icon .closest('.control-group').removeclass('error').addclass('success'); // set success class control group }, submithandler: function (form) { eventadd(); } }); function eventadd() { $.gritter.add({ title: 'success!', text: 'event saved successfully.', sticky: false, time: '10000' }) e.preventdefault(); // preventing gritter notification validator.resetform(); } i cannot think of keep both gritter , successfull resetform functions working. ideas?
edit: html code
<form id="form1"> <div class="alert alert-error hide"> <button class="close" data-dismiss="alert"></button> please fix error fields. </div> <div class="alert alert-success hide"> <button class="close" data-dismiss="alert"></button> fields ok. can save 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 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> add event</button> <button id="event_nullify" type="submit" class="btn yellow tooltips" style="float: right;"><i class="icon-refresh"></i> cancel</button> </form>
1) usage of e.preventdefault() incorrect , unnecessary. if want block regular form submit, put return false @ end of submithandler callback function.
submithandler: function (form) { eventadd(); return false; // block form submit } 2) missing comma right after rules option.
rules: { title: { minlength: 2, required: true }, description: { minlength: 2, required: true } }, // <-- comma missing 3) the plugin's resetform() method resetting validation only... removing error messages , returning form initial validation state. not, however, remove data entries fields.
edit: since you're calling submithandler, never anything. that's because submithandler fires on valid form.
add line $('form').get(0).reset() if want clear out 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 fields } working demo: http://jsfiddle.net/t3dtg/
edit: .resetform() resetting validation (removing outstanding error messages). removed .resetform() above because it's superfluous in context. submithandler fires when form valid, therefore, there nothing resetform() do.
Comments
Post a Comment