Самостоятельное размещение ошибок плагина JQuery Validation

Использование плагина jQuery Validation для следующей формы:

<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)

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

Спасибо

Ответ 1

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

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

Чтобы настроить таргетинг на идентификатор, вы можете сделать

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

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

Ответ 2

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

Рассмотрим:

<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 будет использовать этот ярлык вместо того, чтобы генерировать новый. Извините, я не смог найти никакой официальной документации по этому вопросу, но нашел другие сообщения, которые сталкивались с этим поведением.

Ответ 3

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

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

Ответ 4

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

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

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

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

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