Валидация нескольких одинаковых форм

@Eugene-nsk · Регистрация: 27.07.2014

Студворк — интернет-сервис помощи студентам

Собственно, имею на одной странице множество одинаковых форм заказа. Все имена полей и айдишники одинаковы, отличается лишь значение поля hidden. Мой код срабатывает корректно лишь на первой форме. Что необходимо изменить?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$('form#template-order').bind('submit',function(event) {
        $('#template-order-phone').each(function() 
            {
                if($(this).val().length < 7)
                    {
                        event.preventDefault();
                        $('#template-order-phone-div').addClass('has-error');
                        $("#template-order-phone").focus();
                    }
                else
                    {
                        $('#template-order-phone-div').removeClass('has-error');
                    }
            });
    });

P.S.: Про некорректную W3C-валидацию такого html-кода знаю ))

@Alekzender · 30.10.2014, 15:51

сорри если туплю, но разве $('#template-order-phone') вернет несколько элементов?
По-моему он увидит только первый элемент с таким айдишником и дальше просто не будет смотреть. Как вариант, можно поменять айдишник ни класс и обращаться так: $('.template-order-phone')

@Eugene-nsk · 30.10.2014, 17:56 **[ТС]**

Alekzender, т.е. вариант только присвоить каждой форме свой айдишник? проблема только в том, что тогда код придется увеличить в несколько десятков раз - отдельное правило для каждой формы. в этом-то и суть - сократить количество кода, чтобы не было:

JavaScript
1
$('#template-order-1,#template-order-2,#template-order-3,#template-order-4,#template-order-5')

и т.д...

@Lazy_Den · 30.10.2014, 18:17

Сообщение от Eugene-nsk

т.е. вариант только присвоить каждой форме свой айдишник?

Вам посоветовали не задать для каждой формы свой ID, а всем формам добавить какой-то один класс и его использовать в качестве селектора.

@Eugene-nsk · 31.10.2014, 05:07 **[ТС]**

Lazy_Den, переправил все поля на классы. Работает, однако условие $(this).val().length < 7 не выполняется. В случае, если символов больше чем < 7, форма не отправляется, а класс has-error не убирается.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$('.template-order').bind('submit',function(event) {
        $('.template-order-phone').each(function() 
            {
                if($(this).val().length < 7)
                    {
                        event.preventDefault();
                        $('.template-order-phone-div').addClass('has-error');
                        $('.template-order-phone').focus();
                    }
                else
                    {
                        $('.template-order-phone-div').removeClass('has-error');
                    }
            });
    });

@Lazy_Den · 31.10.2014, 10:43

Сообщение от Eugene-nsk

если символов больше чем < 7, форма не отправляется

Правильно, т.к. у вас под этим условием есть отмена события - event.preventDefault();

@Eugene-nsk · 31.10.2014, 10:45 **[ТС]**

Сообщение от Lazy_Den

Правильно, т.к. у вас под этим условием есть отмена события - event.preventDefault();

Конечно же неправильно, т.к. событие не должно отменяться в случае length >= 7

@Lazy_Den · 31.10.2014, 10:48

Сообщение от Eugene-nsk

Конечно же неправильно, т.к. событие не должно отменяться

Ну, не я же писал вам этот код. )) Не нужно отменять - уберите preventDefault

@Eugene-nsk · 31.10.2014, 10:55 **[ТС]**

Lazy_Den, по-моему понятно, что event.preventDefault(); должно срабатывать, когда символов меньше 7, а иначе не должно? Верно?

@Lazy_Den · 31.10.2014, 10:58

Eugene-nsk, Вы написали, что "если символов больше чем < 7"! Знак "меньше" мной воспринят как опечатка. Почему именно так воспринят? Потому что ваш код, в том виде, как я его могу наблюдать - работает правильно.

@Eugene-nsk · 31.10.2014, 11:22 **[ТС]**

Сообщение от Lazy_Den

Потому что ваш код, в том виде, как я его могу наблюдать - работает правильно.

Воот! А теперь возвращаемся "к нашим баранам" из первого поста этой темы - на нескольких одинаковых формах не работает...

@Lazy_Den · 31.10.2014, 11:27

Сообщение от Eugene-nsk

на нескольких одинаковых формах не работает

А вот это потому, что вы не определяете круг полей, которые нужно проверять, т.е. те поля, которые к данной форме относятся.

JavaScript
1
2
3
4
5
$('.template-order').bind('submit',function(event) {
    $('.template-order-phone', this).each(function() {
        /* ... */
    });
});

@Eugene-nsk · 31.10.2014, 11:29 **[ТС]**

Lazy_Den, а можно на коротком примере ,как это должно выглядеть?

@Lazy_Den · 31.10.2014, 11:44

Сообщение от Eugene-nsk

можно на коротком примере

Можно. Только в примере, я вообще отключу отправку формы, а буду подсвечивать поля формы, которую пытаетесь отправлять. Так будет видно - какие поля затрагиваются при проверке, а какие нет. Смотрим

@Eugene-nsk · 31.10.2014, 16:01 **[ТС]**

Lazy_Den, че-то жестко я протупил. Получается все, что мы сделали - это добавили this в одно место

Новые блоги и статьи Все статьи Все блоги /
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .

@Alekzender 37 / 37 / 23 Регистрация: 21.02.2014 Сообщений: 112
	30.10.2014, 15:51
	сорри если туплю, но разве $('#template-order-phone') вернет несколько элементов? По-моему он увидит только первый элемент с таким айдишником и дальше просто не будет смотреть. Как вариант, можно поменять айдишник ни класс и обращаться так: $('.template-order-phone') 1

@Eugene-nsk 32 / 31 / 9 Регистрация: 27.07.2014 Сообщений: 186
	31.10.2014, 10:55 [ТС]
	Lazy_Den, по-моему понятно, что event.preventDefault(); должно срабатывать, когда символов меньше 7, а иначе не должно? Верно? 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	31.10.2014, 10:58
	Eugene-nsk, Вы написали, что "если символов больше чем < 7"! Знак "меньше" мной воспринят как опечатка. Почему именно так воспринят? Потому что ваш код, в том виде, как я его могу наблюдать - работает правильно. 0

@Eugene-nsk 32 / 31 / 9 Регистрация: 27.07.2014 Сообщений: 186
	31.10.2014, 11:29 [ТС]
	Lazy_Den, а можно на коротком примере ,как это должно выглядеть? 0

@Eugene-nsk 32 / 31 / 9 Регистрация: 27.07.2014 Сообщений: 186
	31.10.2014, 16:01 [ТС]
	Lazy_Den, че-то жестко я протупил. Получается все, что мы сделали - это добавили this в одно место 0