Проверка jQuery: проверка группы, но не проверка поля

#javascript #jquery #forms #validation #plugins

#javascript #jquery #формы #Проверка #Плагины

Вопрос:

Я использую jquery validate и настроил группы. Однако у меня возникли проблемы с поиском наилучшего способа проверки каждой группы отдельно от отдельных полей, которые она содержит.

Чтобы проиллюстрировать это:

У меня есть город, штат и почтовый индекс (в таком порядке). Если кто-то вводит значение для zip, он должен получить положительное подтверждение (у меня эта часть работает с зеленой галочкой у ввода), однако, пока либо состояние, либо zip пусты, сообщение о проверке группы все равно должно отображаться.

При различных попытках я столкнулся со следующими проблемами: — Пользователь пропускает «город», и отображается проверка сообщения, но затем, когда вводится «zip», сообщение о проверке исчезает. (это странно … может быть, ошибка? ) — Пользователь вводит «город», и они получают сообщение об ошибке группы, прежде чем они даже смогут ввести «состояние» — Пользователь вводит «город», но не получит галочку, потому что другие входные данные в группе пусты

Я склоняюсь к решению этой проблемы, перезаписывая событие «onfocusout» (проверяя все входные данные в группе при focusout), но не уверен, есть ли лучший способ с помощью некоторых встроенных методов validate

Спасибо!

* ОБНОВЛЕНИЕ

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

Может быть, проверка группы зависит от результата проверки последнего теста в группе?

В любом случае … вот беспорядок, с которым я столкнулся до сих пор:

Установите группу:

 groups : { location : 'city state zip' }
  

Создайте правило для группы (обратите внимание, что это должен быть массив для сохранения порядка):

 rules : { location : ['city, 'state', 'zip']}
  

Теперь переопределите onfocusout:

     onfocusout : function(el) {
        var groups = this.groups
            , elName = el.name
            , elGroup = groups[elName]
            , $el = $(el)

        if (!this.checkable(el) ){
            this.element(el));
        }

        // If the element belongs to a group, validate all elements in the group 
        // that come before the current element
        if (elGroup) {
            var groupMembers = this.settings.rules[elGroup];

            for (var i=0; i<groupMembers.length; i  ) {
                if ( groupMembers[i] === elName ) {
                    break;
                }
                this.element( $('[name="'   groupMembers[i]   '"]') );
            }
        }
    }
  

Ответ №1:

Похоже, что функция «группы» этого плагина имеет несколько нерешенных проблем, некоторые из которых, похоже, связаны с вашей проблемой.

https://github.com/jzaefferer/jquery-validation/issues/search ?q = группы

Комментарии:

1. Да … я думаю, что вы правы, но я собираюсь подождать немного дольше, если у кого-то есть разумное немедленное решение. Зная то, что я знаю сейчас о поддержке jquery validate для групп, я бы выбрал совершенно другой подход :/

2. Почему бы просто не удалить группы? Просто добавьте свою собственную логику для проверки перестановок сгруппированных элементов. Похоже, вы уже в какой-то степени делаете это в любом случае со своими зелеными галочками.

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

Ответ №2:

для этого вы можете использовать группы, возьмите этот пример:

 $("form").validate({
    rules: {
        City: { required: true },
        Zip: { required: true },
        State: { required: true }
    },
    groups: {
        Location: "City Zip State"
    },
   errorPlacement: function(error, element) {
       if (element.attr("name") == "City" || element.attr("name") == "Zip" || element.attr("name") == "State") 
        error.insertAfter("#State");
       else 
        error.insertAfter(element);
   }
});
  
  • правила устанавливают для 3 полей значение true
  • группы определяют их для проверки как группу
  • и функция errorPlacement определяет, куда поместить сообщение об ошибке

Комментарии:

1. хммм … хотя это должно сработать, когда я пытаюсь это сделать, он не выдает сообщение о проверке, пока последний член группы проходит тест …? Например: сообщение об ошибке отображается, когда я выхожу из города, но затем оно исчезает, когда я помещаю текст в поле zip

2. хм странно, хорошо, посмотрим, смогу ли я это пересмотреть