ReSQL.ru
     
powered by simpleCommunicator - 2.0.56     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / Java [игнор отключен] [закрыт для гостей] / Client-side валидация в spring-формах и управление кнопкой submit'а
17 сообщений из 17, страница 1 из 1
Client-side валидация в spring-формах и управление кнопкой submit'а
    #39723195
Михаил Балашов
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Михаил Балашов
Гость
Привет всем!

Волею судеб занимаюсь поддержкой портального решения, написанного другими людьми, традиционно на текущий момент недоступными для консультации. Портал написан на Java с использованием Spring MVC и Spring Forms . В целом общее представление о том как Spring MVC работает имею, даже получается какой-то функционал допиливать и расширять, но некоторые вопросы ставят в тупик, даже не знаю куда копать. Итак, имеются spring-формы у которых задана валидация - как client-side, так и на сервере, например такой конструкцией:

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
        <div class="control-group">
            <form:label path="firstName" cssClass="control-label">Имя <common:requiredMark/></form:label>
            <div class="controls">
                <form:input path="firstName" required="required"
                            pattern="[- А-Яа-яЁё]+" title="Разрешены только буквы русского алфавита"
                            cssClass="input-xxlarge" maxlength="255"/>
                <form:errors path="firstName" cssClass="help-inline" cssStyle="color: red;"/>
            </div>
        </div>



Соответственно, для текстового поля form:input задана валидация на обязательность и возможный набор символов, которая выполняется при submit'е до отправки формы на сервер. Также на форме используется блокировка кнопки submit'а для того чтобы не возникало двойной отправки, если сервер тупит, а пользователь нетерпеливо тыкает в кнопку, типа того:

Код: html
1.
2.
3.
4.
5.
6.
7.
<script type="text/javascript">
    (function() {
        $('#submit-btn').click(function() {
                $('#submit-btn').attr('disabled', 'disabled');
                $('form#myDto').attr('action', '<%= Url.CREATE_REQUEST %>');
                $("#myForm [type=submit]").click();
        });



В принципе, если все хорошо, то это работает корректно - кнопа дизейблится, форма отправляется, далее выполняются проверки на стороне сервера и, если есть ошибки, они отображаются в элементах form:errors. А вот если не проходит client-side валидация, то ошибки валидации отображаются, но кнопка сабмита остается неактивной (оно и понятно, выключить ее мы выключили, а вот включить - не включали). Но совершенно непонятно куда можно добавить включение кнопки, если валидация не выполнилась. А точнее, как я понимаю более правильное решение - выключать кнопку сабмита нужно после того как прошла валидация на клиенте, но как это перехватить - я не понимаю, так как явных функций валидации нигде не объявлено, вся валидация на клиенте исключительно прописана атрибутами spring-формы, типа "required". Пробовал вставлять что-то типа if ($('#form').isValid()), но js ругается, что подобного метода у объекта нет.

Куда, вообще, копать-то? Заранее всем спасибо!
...
Рейтинг: 0 / 0
26.10.2018, 00:58
| Ответить | Цитировать | Написать  
Client-side валидация в spring-формах и управление кнопкой submit'а
    #39723226
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Petro123
Участник
Михаил Балашовкнопа дизейблится, форма отправляется,это как?
Еще раз по шагам юз кейс по вводу одной неправильной буквы.
А вообще 2 ответа:
- f12 и смотри отладчик
- вопрос не по java а по js
...
Рейтинг: 0 / 0
26.10.2018, 06:44
| Ответить | Цитировать | Написать  
Client-side валидация в spring-формах и управление кнопкой submit'а
    #39723228
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Petro123
Участник
Михаил Балашоввыключать кнопку сабмита нужно после того как прошла валидация на клиенте, но как это перехватить - при каждом вводе символа есть событие. Вот туда повесить js проверку.
...
Рейтинг: 0 / 0
26.10.2018, 06:46
| Ответить | Цитировать | Написать  
Client-side валидация в spring-формах и управление кнопкой submit'а
    #39723238
Михаил Балашов
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Михаил Балашов
Гость
Petro123,

Понимаю, что вопрос больше про JS, но проблема в том, что форма спринговая, в явном виде не видно что за код работает при проверке - в отладчике по сабмиту улетаем в jQuery, а там черт ногу сломит. Вешать обработчик на каждое поле ввода, конечно, можно, но больно уж топорно и громозко - форм много, на них полей тоже много, должен быть способ проще.
...
Рейтинг: 0 / 0
26.10.2018, 08:13
| Ответить | Цитировать | Написать  
Client-side валидация в spring-формах и управление кнопкой submit'а
    #39723242
Михаил Балашов
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Михаил Балашов
Гость
Petro123,

Собственно, глобально сформулировать задачу можно так - как принудительно вызвать client-side валидацию spring-формы до того момента, когда она сама вызовется при сабмите.
...
Рейтинг: 0 / 0
26.10.2018, 08:24
| Ответить | Цитировать | Написать  
Client-side валидация в spring-формах и управление кнопкой submit'а
    #39723244
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Petro123
Участник
Михаил Балашовформа спринговаяразве у спринга есть ГУИ?
Поможет пр. КЛИК мышкой в эксплорере и "показать исходный код"?
Дай оттуда кусок.
...
Рейтинг: 0 / 0
26.10.2018, 08:25
| Ответить | Цитировать | Написать  
Client-side валидация в spring-формах и управление кнопкой submit'а
    #39723245
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Petro123
Участник
Михаил Балашов,
Клинт проверка работает до сабмита!
...
Рейтинг: 0 / 0
26.10.2018, 08:26
| Ответить | Цитировать | Написать  
Client-side валидация в spring-формах и управление кнопкой submit'а
    #39723246
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Petro123
Участник
Михаил БалашовВешать обработчик на каждое поле ввода,где юз кейс на символ?
...
Рейтинг: 0 / 0
26.10.2018, 08:28
| Ответить | Цитировать | Написать  
Client-side валидация в spring-формах и управление кнопкой submit'а
    #39723248
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Petro123
Участник
Михаил БалашовPetro123,

Собственно, глобально сформулировать задачу можно так - как принудительно вызвать client-side валидацию spring-формы до того момента, когда она сама вызовется при сабмите.вместо сабмита вызвать 2 функции js:
if MyIsValid()
МойСабмитФормы() ;
...
Рейтинг: 0 / 0
26.10.2018, 08:32
| Ответить | Цитировать | Написать  
Client-side валидация в spring-формах и управление кнопкой submit'а
    #39723265
Михаил Балашов
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Михаил Балашов
Гость
Petro123вместо сабмита вызвать 2 функции js:
if MyIsValid()
МойСабмитФормы() ;

MyIsValid() - это имеется в виду какая-то автосгенеренная функция с именем <formName> + "IsValid"? Попробовал - такой функции нет.
...
Рейтинг: 0 / 0
26.10.2018, 09:07
| Ответить | Цитировать | Написать  
Client-side валидация в spring-формах и управление кнопкой submit'а
    #39723268
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Petro123
Участник
Михаил Балашов,
Сам напиши. Это своя.
...
Рейтинг: 0 / 0
26.10.2018, 09:13
| Ответить | Цитировать | Написать  
Client-side валидация в spring-формах и управление кнопкой submit'а
    #39723274
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Petro123
Участник
Михаил Балашов,

Тебе зачем нужна клиентская ты так и не написал. Юз кйса нет,
Disable Enable термины перепутал.
...
Рейтинг: 0 / 0
26.10.2018, 09:19
| Ответить | Цитировать | Написать  
Client-side валидация в spring-формах и управление кнопкой submit'а
    #39723311
Михаил Балашов
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Михаил Балашов
Гость
Petro123Тебе зачем нужна клиентская ты так и не написал

Как и любая другая клиентская, чтобы проверки, например, на обязательные поля, выполнялись до отправки формы. Это все автоматически работает - в исходниках jsp-страницы написано следующее:

Код: html
1.
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>



Соответственно, вот таким образом задается форма:

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
<form:form id="createForm" cssClass="form-horizontal" commandName="myDto" action="<%= Url.CREATE__REQUEST %>">
    <fieldset>
        <legend>Создание заявки на регистрацию агента</legend>
 
        <div class="control-group">
            <form:label path="lastName" cssClass="control-label">Фамилия <my:requiredMark/></form:label>
            <div class="controls">
                <form:input path="lastName" required="required"
                            cssClass="input-xxlarge" maxlength="255"
			    pattern="[- А-Яа-яЁё]+" title="Разрешены только буквы русского алфавита"/>
                <form:errors path="lastName" cssClass="help-inline" cssStyle="color: red;"/>
            </div>
        </div>



В исходнике HTML выглядит это вот так:

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
<form id="createForm" class="form-horizontal" action="/registration-request/create.html" method="post">
    <fieldset>
        <legend>Создание заявки на регистрацию агента</legend>

        <div class="control-group">
            <label for="lastName" class="control-label">Фамилия <span style="color: red; font-size: 16px;">*</span></label>
            <div class="controls">
                <input id="lastName" name="lastName" class="input-xxlarge" title="Разрешены только буквы русского алфавита" pattern="[- А-Яа-яЁё]+" required="required" type="text" value="" maxlength="255"/>                
            </div>
        </div>



Т.е. никаких дополнительных валидаций или событий не прописывается, все "волшебным образом" автоматизируется, но атрибут required="required" заставляет форму перед отправкой провалидировать поле на предмет его заполнения - если не заполнено, то поле выделяется красным, всплывает подсказка "Поле обязательно для заполнения".

Petro123Disable Enable термины перепутал.

Не перепутал - логика следующая, по-умолчанию кнопка submit'а активная, disable'ится она после нажатия на нее, чтобы пользователь не отправил форму повторно, пока сервер тупит (прецеденты были, на серверной стороне достаточно развитая обработка, в том числе запросы во внешние сервисы, операции с базой, соответственно, превентивно блокируем повторный submit. Но возникает проблема с "встроенной" client-side валидацией - если она не проходит, то кнопка остается заблокированной и нужно ее как-то разблокировать - reload'а формы при client-side валидации нет, вешать кучу обработчиков на все поля не хочется, более элегантным решением видится disable'ить кнопку только если валидация проходит успешно, собственно в этом и вопрос - как ее принудительно запустить? Написать свою валидацию "сверху", конечно, можно, но пипец какие костыли рядом с уже работающей штатной валидацией и потребует поддержки в десятках форм с десятками полей.
...
Рейтинг: 0 / 0
26.10.2018, 10:15
| Ответить | Цитировать | Написать  
Client-side валидация в spring-формах и управление кнопкой submit'а
    #39723313
Михаил Балашов
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Михаил Балашов
Гость
Petro123Тебе зачем нужна клиентская ты так и не написал

Как и любая другая клиентская, чтобы проверки, например, на обязательные поля, выполнялись до отправки формы. Это все автоматически работает - в исходниках jsp-страницы написано следующее:

Код: html
1.
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>



Соответственно, вот таким образом задается форма:

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
<form:form id="createForm" cssClass="form-horizontal" commandName="myDto" action="<%= Url.CREATE__REQUEST %>">
    <fieldset>
        <legend>Создание заявки на регистрацию агента</legend>
 
        <div class="control-group">
            <form:label path="lastName" cssClass="control-label">Фамилия <my:requiredMark/></form:label>
            <div class="controls">
                <form:input path="lastName" required="required"
                            cssClass="input-xxlarge" maxlength="255"
			    pattern="[- А-Яа-яЁё]+" title="Разрешены только буквы русского алфавита"/>
                <form:errors path="lastName" cssClass="help-inline" cssStyle="color: red;"/>
            </div>
        </div>



В исходнике HTML выглядит это вот так:

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
<form id="createForm" class="form-horizontal" action="/registration-request/create.html" method="post">
    <fieldset>
        <legend>Создание заявки на регистрацию агента</legend>

        <div class="control-group">
            <label for="lastName" class="control-label">Фамилия <span style="color: red; font-size: 16px;">*</span></label>
            <div class="controls">
                <input id="lastName" name="lastName" class="input-xxlarge" title="Разрешены только буквы русского алфавита" pattern="[- А-Яа-яЁё]+" required="required" type="text" value="" maxlength="255"/>                
            </div>
        </div>



Т.е. никаких дополнительных валидаций или событий не прописывается, все "волшебным образом" автоматизируется, но атрибут required="required" заставляет форму перед отправкой провалидировать поле на предмет его заполнения - если не заполнено, то поле выделяется красным, всплывает подсказка "Поле обязательно для заполнения".

Petro123Disable Enable термины перепутал.

Не перепутал - логика следующая, по-умолчанию кнопка submit'а активная, disable'ится она после нажатия на нее, чтобы пользователь не отправил форму повторно, пока сервер тупит (прецеденты были, на серверной стороне достаточно развитая обработка, в том числе запросы во внешние сервисы, операции с базой, соответственно, превентивно блокируем повторный submit. Но возникает проблема с "встроенной" client-side валидацией - если она не проходит, то кнопка остается заблокированной и нужно ее как-то разблокировать - reload'а формы при client-side валидации нет, вешать кучу обработчиков на все поля не хочется, более элегантным решением видится disable'ить кнопку только если валидация проходит успешно, собственно в этом и вопрос - как ее принудительно запустить? Написать свою валидацию "сверху", конечно, можно, но пипец какие костыли рядом с уже работающей штатной валидацией и потребует поддержки в десятках форм с десятками полей.
...
Рейтинг: 0 / 0
26.10.2018, 10:17
| Ответить | Цитировать | Написать  
Client-side валидация в spring-формах и управление кнопкой submit'а
    #39723334
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Petro123
Участник
Михаил Балашовdisable'ится она после нажатия на нее, чтобы пользователь не отправил форму повторноэтот функционал совершенно не имеет отношения к клиент валидации.
Если его временно убрать то вопрос решен?
...
Рейтинг: 0 / 0
26.10.2018, 11:00
| Ответить | Цитировать | Написать  
Client-side валидация в spring-формах и управление кнопкой submit'а
    #39723336
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Petro123
Участник
Михаил Балашовостается заблокированной и
Два решения
1. Не блокируй, а скрой ее или на сервере не принимай повтор.
2. Повесь таймер и разблокируй через секунду
Я в js вешал немодальное сообщение: Сохраняем.... И никакой дурак не жмет дважды.
Ты тут в форуме не видел такую мессагу?
...
Рейтинг: 0 / 0
26.10.2018, 11:04
| Ответить | Цитировать | Написать  
Client-side валидация в spring-формах и управление кнопкой submit'а
    #39723402
Михаил Балашов
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Михаил Балашов
Гость
Разобрался, принудительную валидацию можно вот таким образом выполнить:


Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
        $('#create-btn').click(function() {
            var form = document.getElementById("createForm");

            if (form.checkValidity()) {
                $('#create-btn').attr('disabled', 'disabled');
                $('form#MyDto').attr('action', '<%= Url.CREATE_REQUEST %>');
            }
            $("#createForm [type=submit]").click();
        });
...
Рейтинг: 0 / 0
26.10.2018, 12:16
| Ответить | Цитировать | Написать  
17 сообщений из 17, страница 1 из 1
Форумы / Java [игнор отключен] [закрыт для гостей] / Client-side валидация в spring-формах и управление кнопкой submit'а
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru       Новости, Чат       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=59&msg=39723402&tid=2121694]:
 0ms
get settings:
 9ms
get forum list:
 11ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 101ms
get topic data:
 11ms
get forum data:
 2ms
get page messages:
 46ms
get tp. blocked users:
 1ms
others: 12ms
total:  199ms
созд. / загр.: 199ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]