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

@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 в одно место

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .

@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