Как отобразить сообщения об ошибках валидатора jQuery для динамической формы без дублирования сообщений одного типа - PullRequest
Новая
       29

Как отобразить сообщения об ошибках валидатора jQuery для динамической формы без дублирования сообщений одного типа

2 голосов
/ 07 апреля 2011

У меня есть таблица, которая представляет собой форму ввода для счета-фактуры, количество строк является динамическим, в зависимости от того, сколько товаров пользователь вводит в счет-фактуру,

количество полей ввода в строке всегда одинаково, и все они представляют одни и те же вещи, поэтому имеют одинаковые правила проверки. 

<form id="myform" name="myform" action="" method="">
<table>
    <tr>
        <td>
            <input type="text" name="amount_id1" id="amount_id1" value=""/>
        </td>
        <td>
            <input type="text" name="price_id1" id="amount_id1" value=""/>
        </td>
        ....
    </tr>
    <tr>
        <td>
            <input type="text" name="amount_id2" id="amount_id2" value=""/>
        </td>
        <td>
            <input type="text" name="price_id2" id="price_id2" value=""/>
        </td>
        .....
    </tr>
    ....
</table>
</form>

Я использую плагин проверки jQuery: плагин проверки

Теперь я хочу обернуть все ошибки в ОДИН контейнер, потому что отображать их рядом с каждым полем ввода ужасно грязно.

Я знаю, что этого можно достичь с помощью настроек оболочки и errorLabelContainer

Но я не хочу отображать повторяющиеся сообщения:
на самом деле бесполезно отображать «количество должно быть положительным числом» x10 раз для каждого из 10 полей, в которых пользователь допустил ошибку ...
Итак, что я хочу, для каждого вида поля ввода (будь то сумма, цена, скидка, НДС или что-то еще) если есть один неверный ввод, я хочу отобразить 1 сообщение об ошибке такого рода ошибки
Пример:
количество требуется и цифры как правила класса.
Если пользователь забывает ввести сумму в разных местах, я хочу 1 сообщение в errorcontainer, в котором говорится: «поля суммы обязательны» если рядом с этим он вводит "char или что-то не-цифра" в поле количества, я хочу дополнительное сообщение об ошибке, говорящее: "поля количества должны быть только цифрами" '

Еще один способ сказать что-то:
если сообщение уже отображается, не отображать его,
если это не так, покажите его.

Чтобы помочь пользователю показать, какие поля являются недействительными, я просто использую настройки выделения, отмены выделения, добавляя класс к рассматриваемому полю, что дает ему красную рамку. Это работает как шарм.

Я пытался использовать showErrors, invalidHandler, errorPlacement, но я не могу заставить вещи работать. даже не близко. Не существует массива / объекта, который содержит текущие недопустимые элементы для всей формы. Однако существуют errorMap и errorList, которые содержат ошибки этапа проверки CURRENT. это означает, что половина времени содержит только ошибки для одного поля из-за эффектов фокусировки / размытия. Да, я знаю, что отключение всех параметров, чтобы проверка запускалась только при попытке отправки формы, означало бы, что errorMap / errorList всегда будет содержать все ошибки для всей формы. Но на самом деле это не вариант imo / myBoss'sOpinion. Я попытался покопаться в свойствах валидатора, в источнике валидатора, чтобы найти что-то, что могло бы помочь, но, похоже, я ничего не могу найти ..

Надеюсь, я объяснил все достаточно хорошо, чтобы кто-то помог мне в этом, потому что я на какое-то время ломал голову над этим.

Любая помощь / предложения / идеи приветствуются:)

1 Ответ

3 голосов
/ 07 апреля 2011

См. http://docs.jquery.com/Plugins/Validation/validate#options и, в частности, параметр groups.

Укажите группировку сообщений об ошибках. группа состоит из произвольной группы имя в качестве ключа и пробел список имен элементов в качестве значения. Используйте errorPlacement для управления где групповое сообщение помещается. 

$("#myform").validate({
  groups: {
    username: "fname lname"
  },
  errorPlacement: function(error, element) {
     if (element.attr("name") == "fname" 
                 || element.attr("name") == "lname" )
       error.insertAfter("#lastname");
     else
       error.insertAfter(element);
   },
   debug:true
 })

Указанная выше опция errorPlacement относится к:

Настройка размещения созданной ошибки этикетки. Первый аргумент: созданный метка ошибки как объект jQuery. второй Аргумент: недопустимый элемент как jQuery объект.

Что определено на той же самой справочной странице .

...