Я использую плагин validator jQuery в этой форме регистрации.
Проблема, с которой я сталкиваюсь, заключается в том, что если я сосредоточусь на этом поле ввода, и он содержит ошибку (недействительный адрес электронной почты или пустое поле), а затем я продолжаю заполнять форму правильно, независимо от последней ошибки не исчезает.
Так, например, если я пропущу "@" при заполнении своего адреса электронной почты и получаю "Пожалуйста, введите действительный адрес электронной почты". ошибка, эта ошибка сохраняется даже после ввода "@".
Здесь код, который я использую для инициализации:
$(document).ready(function()
{
$('#form').validate(
{
rules:
{
email:
{
required: true,
email: true
}
},
errorPlacement: function(error, element)
{
$('#hidden').html(error);
}
});
});
И вот моя форма:
<form id="form" role="form" class="form-inline" method="POST">
<p id="p">Get notified when Shopaholic launches</p>
<input type="email" name="email" class="form-control input-lg" id="inputEmail" placeholder="Enter email">
<button type="submit" class="btn btn-primary btn-lg" data-dismiss="modal">Notify me</button>
</form>
<div type="hidden" id="hidden" class="p"></div>
ОБНОВИТЬ
После ответа Спарки, код, который работал, был следующим:
$(document).ready(function()
{
$('#form').validate(
{
rules:
{
email:
{
required: true,
email: true
}
},
errorLabelContainer: "#hidden",
errorPlacement: function(error, element)
{
error.insertAfter(element);
}
});
});
Это разбивает плагин...
errorPlacement: function(error, element) {
$('#hidden').html(error);
}
error
- это объект, а не HTML, а element
- это входной объект, который вызвал ошибку.
Функция по умолчанию: error.insertAfter(element)
Независимо от пользовательской функции, вы действительно должны использовать объекты с error
и element
поскольку плагин автоматически переключает видимость своего объекта error
.
Существуют и другие варианты, которые вы можете использовать, если вам не нужны сообщения внутри label
или если вы хотите, чтобы все сообщения были помещены в другой контейнер.
Просмотреть все возможности здесь: http://jqueryvalidation.org/validate/
Используйте это вместо этого:
$(document).ready(function()
{
$('#form').validate(
{
rules:
{
email:
{
required: true,
email: true
}
},
messages: {
email: "Please enter a valid email address."
}
});
});