Плагин Jquery Validation, настраиваемое размещение ошибок

Question

Использование подключаемого модуля проверки 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? (# недействительное имя, # недействительный адрес электронной почты, # недействительный текст)

Я прочитал документацию по размещению ошибок, но не понял, как она работает. Можно ли обработать каждую отдельную ошибку и поместить ее в указанный элемент?

Спасибо

Answer 1

Вы также можете вручную добавить метки ошибок в те места, где они вам нужны. В моем конкретном случае у меня была более сложная форма со списками флажков и т. Д., Где вставка или вставка после сломали бы макет. Вместо того, чтобы делать это, вы можете воспользоваться тем, что сценарий проверки оценит, существует ли существующий тег метки для указанного поля, и использовать его.

Рассмотрим:

<div id="id">
    <label for="name">Name: (*)</label>
    <input type="text" id="name" class="details" name="name" maxlength="50" />
</div>

Теперь добавьте следующую строку:

<label for="name" class="error" generated="true"></label>

это стандартная метка ошибки:

<div id="id">
    <label for="name">Name: (*)</label>
    <input type="text" id="name" class="details" name="name" maxlength="50" />
</div>
<div id="id-error">
    <label for="name" class="error" generated="true"></label>
<div>

jQuery будет использовать этот ярлык, а не генерировать новый. Извините, я не смог найти никакой официальной документации по этому вопросу, но нашел другие сообщения, которые сталкивались с этим поведением.

Answer 2

Это базовая структура, вы можете использовать любой селектор, который вы хотите в методе. У вас есть элемент error и элемент, который был недействительным.

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'));
    }
});

Не проверено, но должно работать.

Answer 3

Я обнаружил, что использование .insertAfter вместо .appendTo работает:

jQuery.validator.setDefaults({
    errorPlacement: function(error, element) {
        error.insertAfter('#invalid-' + element.attr('id'));
    }
});

Answer 4

Я использую расширение метаданных с валидатором .. (обратите внимание, я устанавливаю его для использования атрибута data-meta в разметке ...)

<input ... data=meta='{
    errorLabel: "#someotherid"
    ,validate: {
        name:true
    }
}' >

затем в коде ...

jQuery.validator.setDefaults({
    errorPlacement: function(error, element) {
        error.appendTo($(
            $(element).metadata().errorLabel
        ));
    }
});

Я использовал метаданные для многих аналогичных функций, которые работают довольно хорошо ... обратите внимание, я использовал одиночные галочки (апострофы) вокруг метаданных, так что вы можете использовать серверный сериализатор JSON чтобы вставить в эту часть тега (который должен использовать двойные кавычки вокруг строк) ... может быть проблема с литеральным апосом (замените "'" на "\ x27" в строке).