Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.80/5: Рейтинг темы: голосов - 5, средняя оценка - 4.80
102 / 93 / 36
Регистрация: 01.04.2013
Сообщений: 649
1

Trim инпутов формы перед валидацией

17.02.2018, 14:48. Показов 850. Ответов 11
Метки нет (Все метки)

Есть форма с текстовым полем с атрибутом required.
При отправке использую нативную валидацию, но отправляю всё аяксом.
Javascript
1
2
3
4
5
6
$('#add_form').submit(function (e) {
            if (this.checkValidity()) {
                $.post(...);
                e.preventDefault();
            }
        });
Всё работает. Если поле пустое, то при отправке выходит сообщение о пустом поле и отправка останавливается, если поле заполнено, то делается аякс-запрос.

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

Добавляю очистку пустых значений
Javascript
1
2
3
4
5
6
7
8
9
$('#add_form').submit(function (e) {
            $(this).find(':input').each(function(){
                this.value = $(this).val().trim();
            });
            if (this.checkValidity()) {
                $.post(...);
                e.preventDefault();
            }
        });
но тогда нативная валидация формы почему-то перестаёт работать и происходит нативная отправка формы с пустым полем.

Добавлено через 19 минут
UPD: в хроме по крайней мере так
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
17.02.2018, 14:48
Ответы с готовыми решениями:

Нужен пример jquery формы c валидацией полей
Всем привет! Только начал изучать jQuery и сразу столкнулся с трудностями реализации! Нужно...

Проблемы с валидацией формы в Safari и IE
Проблема с отображением валидации в Safari и конечно же IE. Все остальные дружно проверяют поля на...

Проблема с валидацией формы update в Thymeleaf и Spring
Для создания новой сущности используется форма: <form method="POST"...

Удалить пробелы из формы, trim
Здравствуйте! Подскажите, пожалуйста. Нужно сделать так, чтобы из формы по окончании ввода данных...

11
3283 / 2813 / 1412
Регистрация: 15.01.2014
Сообщений: 6,137
17.02.2018, 14:59 2
Firework, Я так понимаю, что у формы атрибут novalidate. У вас получается, что если форма валидацию прошла, то отрабатывает метод preventDefault() и данные передаются Ajax-ом, а если нет, то данные формы спокойно отправляются обычным способом. Поэтому предотвращать событие, вам нужно в любом случае.
Javascript
1
2
3
4
5
6
7
8
9
$('#add_form').submit(function(e) {
    e.preventDefault();
    $(this).find(':input').each(function() {
        this.value = $(this).val().trim();
    });
    if (this.checkValidity()) {
        $.post();
    }
});
0
102 / 93 / 36
Регистрация: 01.04.2013
Сообщений: 649
17.02.2018, 23:51  [ТС] 3
Цитата Сообщение от Lazy_Den Посмотреть сообщение
Я так понимаю, что у формы атрибут novalidate. У вас получается, что если форма валидацию прошла, то отрабатывает метод preventDefault() и данные передаются Ajax-ом, а если нет, то данные формы спокойно отправляются обычным способом. Поэтому предотвращать событие, вам нужно в любом случае.
Как раз атрибута novalidate нет. Иначе как бы срабатывала нативная валидация?
Если вызывать preventDefault() и при непрохождении валидации, то пробелы уберутся, но ничего с формой не произойдёт, и аякс-запрос не отправится. Если нажать на отправку второй раз, то уже валидация сработает.
Видимо, автозамена значения поля формы влияет на её поведение.
0
3283 / 2813 / 1412
Регистрация: 15.01.2014
Сообщений: 6,137
18.02.2018, 00:07 4
Цитата Сообщение от Firework Посмотреть сообщение
Иначе как бы срабатывала нативная валидация?
Нормально бы срабатывала
Цитата Сообщение от Firework Посмотреть сообщение
Видимо, автозамена значения поля формы влияет на её поведение.
Не влияет
0
102 / 93 / 36
Регистрация: 01.04.2013
Сообщений: 649
18.02.2018, 00:20  [ТС] 5
Цитата Сообщение от Lazy_Den Посмотреть сообщение
Нормально бы срабатывала
так здесь мы сами подсвечиваем инпут, и у него не показывается сообщение о недопустимом значении. Мне же нужно как раз сообщение о пустом поле, иначе какой смысл мне использовать нативную валидацию?
0
3283 / 2813 / 1412
Регистрация: 15.01.2014
Сообщений: 6,137
18.02.2018, 00:57 6
Цитата Сообщение от Firework Посмотреть сообщение
так здесь мы сами подсвечиваем инпут
Подсветка, вывод в консоль - это только для вас демонстрация.
Цитата Сообщение от Firework Посмотреть сообщение
Мне же нужно как раз сообщение о пустом поле
Кто вам мешает в else выводить сообщение?

Добавлено через 1 минуту
Цитата Сообщение от Firework Посмотреть сообщение
иначе какой смысл мне использовать нативную валидацию?
Кстати, да... А какой смысл вы вкладываете?

Добавлено через 14 минут
Короче, придётся ванговать. Если вам нужен вывод сообщения по умолчанию (сгенерированный браузером), то можно сделать следующим образом и без проверок методом checkValidity:
Javascript
1
2
3
4
5
6
7
8
9
10
const addForm = $('#add_form');
addForm.find(':submit').on('click', function() {
    addForm.find('[required]').each(function() {
        $(this).val($.trim($(this).val()));
    });
});
addForm.on('submit', function(e) {
    e.preventDefault();
    console.log('Ajax-request');
});
1
102 / 93 / 36
Регистрация: 01.04.2013
Сообщений: 649
18.02.2018, 01:06  [ТС] 7
Цитата Сообщение от Lazy_Den Посмотреть сообщение
Кто вам мешает в else выводить сообщение?
alert'ом? Я как раз это этого ухожу нативной валидацией.
Цитата Сообщение от Lazy_Den Посмотреть сообщение
Кстати, да... А какой смысл вы вкладываете?
Уйти от обработки формы JS-ом. У меня в проекте таких форм несколько десятков, под каждую нужно писать свой обработчик.
Я решил найти универсальное и простое решение. И я его нашёл. Но я считаю большим упущением проектировщиков HTML5 тот факт, что required input'ы позволяют вводить только пробелы и приходится вводить дополнительный атрибут pattern. Т.к. в большинстве случаев очевидно, что строка, состоящая из одних пробелов, не будет устраивать. Для этого нужно было ввести дополнительный атрибут allowonlyspaces.
0
3283 / 2813 / 1412
Регистрация: 15.01.2014
Сообщений: 6,137
18.02.2018, 01:19 8
Цитата Сообщение от Firework Посмотреть сообщение
позволяют вводить только пробелы
required подразумевает "не пустое поле". Пробел - это такой же символ, как и любой другой. Если есть хоть какой-то символ, то поле уже не считается пустым. В чем тогда упущение разработчиков HTML5? И да, pattern - это уже как раз инструмент для определение специфических правил, т.к. кому-то не нужны одни символы, а кому-то другие. На всех не угодишь ведь
0
102 / 93 / 36
Регистрация: 01.04.2013
Сообщений: 649
18.02.2018, 01:20  [ТС] 9
Цитата Сообщение от Lazy_Den Посмотреть сообщение
Короче, придётся ванговать. Если вам нужен вывод сообщения по умолчанию (сгенерированный браузером), то можно сделать следующим образом и без проверок методом checkValidity:
Странно, но почему это работает при отправке формы не только через нажатие кликом на кнопку submit, а через нажатие клавиши enter?
0
3283 / 2813 / 1412
Регистрация: 15.01.2014
Сообщений: 6,137
18.02.2018, 01:27 10
Цитата Сообщение от Firework Посмотреть сообщение
Для этого нужно было ввести дополнительный атрибут allowonlyspaces
Не исключено, что когда-нибудь и введут.

Добавлено через 6 минут
Цитата Сообщение от Firework Посмотреть сообщение
почему это работает ... через нажатие клавиши enter?
Потому, что enter на элементе формы триггерует событие на кнопку submit, при условии, что она есть.
1
102 / 93 / 36
Регистрация: 01.04.2013
Сообщений: 649
18.02.2018, 01:32  [ТС] 11
Цитата Сообщение от Lazy_Den Посмотреть сообщение
Потому, что enter на элементе формы триггерует событие на кнопку submit, при условии, что она есть.
А это на всех современных браузерах? Сафари и Опера также ведут себя?
0
3283 / 2813 / 1412
Регистрация: 15.01.2014
Сообщений: 6,137
18.02.2018, 01:38 12
Цитата Сообщение от Firework Посмотреть сообщение
А это на всех современных браузерах?
Не проверял, но FF, webkit и осел 10+ работает точно
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
18.02.2018, 01:38

Проблема с валидацией
На страницу кинуты ValidationSummary и валидаторы, в мастер пейдже есть меню, меню работает на...

Перед отображением формы
Всем привет! При запуске необходима проверка, запущенно ли данное приложение уже. Если запущено...

Проблема с валидацией из-за DateFormat
Здравствуйте. Из БД вытягиваю в TextBoxFor дату, прикрепил к полю датапикер, на сайте реализована...

Импорт с валидацией из Excel
подскажите, как экспортировать данные из excel в таблицу оракла, но(!) проверяя на дублированность...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
12
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru