Используя плагин Проверки jQuery для следующей формы:
<form id="information" method="post" action="#">
<fieldset>
<legend>Please enter your contact details</legend>
<span id="invalid-name"></span>
<div id="id">
<label for="name">Name: (*)</label>
<input type="text" id="name" class="details" name="name" maxlength="50" />
</div>
<span id="invalid-email"></span>
<div id="id">
<label for="email">Email: (*)</label>
<input type="text" id="email" class="details" name="email" maxlength="50" />
</div>
</fieldset>
<fieldset>
<legend>Write your question here (*)</legend>
<span id="invalid-text"></span>
<textarea id="text" name="text" rows="8" cols="8"></textarea>
<div id="submission">
<input type="submit" id="submit" value="Send" name="send"/>
</div>
<p class="required">(*) Required</p>
</fieldset>
</form>
Как я могу поместить ошибки в тегах span? (#invalid-name, #invalid-email, #invalid-text)
Я прочитал документацию об ошибочном размещении, но я не добирался, как это работает. Действительно ли возможно обработать каждую единственную ошибку и поместить его в указанный элемент?
Спасибо
Это базовая структура, вы можете использовать любой селектор в методе. У вас есть элемент ошибки и недопустимый элемент.
jQuery.validator.setDefaults({
errorPlacement: function(error, element) {
error.appendTo(element.prev());
}
});
Или для таргетинга на ID, вы можете сделать
jQuery.validator.setDefaults({
errorPlacement: function(error, element) {
error.appendTo('#invalid-' + element.attr('id'));
}
});
Не проверено, но должно работать.
Я обнаружил, что при использовании .insertAfter вместо .appendTo работает:
jQuery.validator.setDefaults({
errorPlacement: function(error, element) {
error.insertAfter('#invalid-' + element.attr('id'));
}
});