У меня возникла проблема с уведомлением 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> 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) Ваше использование 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()
ничего не нужно делать.
submitHandler
срабатывает только тогда, когда форма действительна.
preventDefault()
. Он предназначен для предотвращения поведения определенных событий по умолчанию, например, для остановки истории при нажатии на ссылку привязки. И это ничего не делает, если вы пренебрегаете передачей аргументаevent
(e
) в функцию. Смотрите документацию: api.jquery.com/event.preventDefault