Я использую Jquery validate для предоставления обратной связи с пользователем и предоставления им обновлений о достоверности данных, которые они вводят в форму.Но у меня возникают проблемы при настройке поведения, которое создает Jquery validate.
У меня есть простая форма, подобная этой:
<form id="form1">
<label for="input1" />
<input name="input1" />
<input type="submit" />
</form>
Когда пользователь вводит неверную информацию, я хочу, чтобы Jquery validate вывел что-то подобное:
<form id="form1">
<label for="input1" />
<input name="input1" class="error"/><span class="errorIcon">Error</span>
<p class="errorText">Error message</p>
<input type="submit" />
</form>
Когда пользователь заполняет поле допустимой информацией, я хочу, чтобы вывод Jquery подтвердил:
<form id="form1">
<label for="input1" />
<input name="input1" /><span class="successIcon">Success</span>
<input type="submit" />
</form>
Я установил необходимые правила и пользовательские сообщения проверки, чтобы они запускалисьхорошо, но у меня возникают проблемы при получении описанного выше поведения.
У меня есть это в настоящее время:
$('#form1').validate({
showErrors: function(errorMap, errorList) {
if (errorList < 1 ) {
$('span.errorIcon').remove();
$('p.errorText').remove();
$('input.error').removeClass('error');
$('select.error').removeClass('error');
return;
}
$.each(errorList, function(index, error) {
if ($(error.element).siblings('.errorText').length === 0 && $(error.element).siblings('.errorIcon').length === 0) {
$(error.element).next('p.errorText').remove();
$(error.element).addClass('error');
$(error.element).after(
$('<p/>')
.addClass('errorText')
.append(error.message)
);
$(error.element).after(
$('<span>There is an issue with this field</span>')
.addClass('errorIcon')
);
}
});
},
//rules and messages defined here
);
Таким образом, вышеупомянутое не достигает того, что мне нужно в данный момент, и мне кажется, что яможет быть более сложным в этом вопросе.Я довольно неопытен с Javascript и Jquery.Любое руководство в получении этого будет оценено.
Приветствия
РЕДАКТИРОВАТЬ:
Вот ссылка на jsfiddle: http://jsfiddle.net/WJ9Vt/4/ с образцом формы.