Валидация формы

@Aglar · Регистрация: 10.10.2018

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

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    <div class="article container"> 
     <div class="row">
     <div class="col-sm-6 col-md-4 col-md-offset-4">
    <p><h3>Пример формы</h3>
    
    <form action="/save"  method="post" > <br>
    <label>Фамилия: </label> <input type="text" ng-model="users.surname" name="surname" class="form-control"><br>
    <label>Имя: </label> <input type="text" ng-model="users.name" name="name" class="form-control"><br>
 <label>Отчество: </label> <input type="text" ng-model="users.patronymic" name="patronymic" class="form-control"><br>
 <label>Адрес: </label> <input type="text" ng-model="users.adress" name="adress" class="form-control"><br>
<label>Телефон: </label> <input type="text" ng-model="users.phone" name="phone" class="form-control"><br>
<label>E-mail: </label> <input type="text" ng-model="users.mail" name="mail" class="form-control"><br>
    <br>
    <button type="submit" class="btn btn-default" >Отправить</button>
    </form> 
 <div> 
 <div> 
 <div>

@Mr_Sergo · 05.02.2019, 07:35

Aglar,

Самое простое это добавить required
<input type="text" ng-model="users.surname" name="surname" class="form-control" required>

Добавлено через 1 минуту
Пример required -> https://codepen.io/Mr_Sergo/pe... itors=1000

Добавлено через 7 часов 38 минут
Aglar,

Можно так -> https://codepen.io/Mr_Sergo/pe... itors=1010

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="article container"> 
    <div class="row">
        <div class="col-sm-6 col-md-4 col-md-offset-4">
            <h3>Пример формы</h3>
 
            <form action="/save"  method="post" class="myForm"><br>
                <label>Фамилия: </label> <input type="text" ng-model="users.surname" name="surname" class="form-control" required><br>
                <label>Имя: </label> <input type="text" ng-model="users.name" name="name" class="form-control" required><br>
                <label>Отчество: </label> <input type="text" ng-model="users.patronymic" name="patronymic" class="form-control" required><br>
                <label>Адрес: </label> <input type="text" ng-model="users.adress" name="adress" class="form-control" required><br>
                <label>Телефон: </label> <input type="text" ng-model="users.phone" name="phone" class="form-control" required><br>
                <label>E-mail: </label> <input type="text" ng-model="users.mail" name="mail" class="form-control"><br>
                <br>
                <button type="button" class="btn btn-default" >Отправить</button>
            </form>
        </div>
    </div>
</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
let myForm = document.querySelector('.myForm');
 
document.querySelector('.btn').addEventListener('click',() => {
    let errors = '';
    myForm.querySelectorAll('input').forEach(e => {
        if(e.hasAttribute('required') && !e.value.trim()) errors += '\n' + e.previousElementSibling.innerText.slice(0,-2);
    });
    if(errors) alert('Заполните поля: ' + errors);
    else myForm.submit();
});

Обратите внимание что type у button изменился и к каждому полю, которое нужно проверить, нужно добавить required.

@Aglar · 05.02.2019, 23:10 **[ТС]**

спасибо, все вроде бы работает. но столкнулся с такой проблемой: у меня есть сайт (SPA), и эта форма подгружается в body.
выношу скрипт в отдельный файл и подключаю его, но при нажатии кнопку почему-то ничего не происходит... если же просто выводить форму отдельно, то все вроде бы ок. я пока в этом деле начинающий, ткните пальцем, если не сложно

@amr-now · 06.02.2019, 09:10

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

выношу скрипт в отдельный файл

Тут два варианта действий.
Для старых браузеров используйте
<script src="..." defer >

Если совместимость планируется именно с современными настольными браузерами, то используйте нативные модули ES2015.
Они даже заставляют писать более красивый код.

Добавлено через 1 минуту

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

let myForm = document.querySelector('.myForm');

Если присвоение в переменную произойдет раньше, чем достроился DOM страницы, то переменная будет undefined.

@Mr_Sergo · 06.02.2019, 09:40

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

но при нажатии кнопку почему-то ничего не происходит

попробуйте так

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
window.addEventListener('load',()=> {
 
    document.querySelector('.btn').addEventListener('click',() => {
        let myForm = document.querySelector('.myForm');
        let errors = '';
        myForm.querySelectorAll('input').forEach(e => {
            if(e.hasAttribute('required') && !e.value.trim()) errors += '\n' + e.previousElementSibling.innerText.slice(0,-2);
        });
        if(errors) alert('Заполните поля: ' + errors);
        else myForm.submit();
    });
 
});

либо еще вариант такой -> https://codepen.io/Mr_Sergo/pe... itors=0010
перейдите по ссылке и подождите 5 секунд- пока форма не появится и попробуйте нажать кнопку отправки
вам, как вариант, нужен только этот код

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// проверяем наличие кнопки "Отправить" каждую секунду --- если кнопка появилась то вешаем на нее клик и очищаем интервал
    let interval = setInterval(() => {
        if(document.querySelector('.btn')){
            document.querySelector('.btn').addEventListener('click',() => {
                let myForm = document.querySelector('.myForm');
                let errors = '';
                myForm.querySelectorAll('input').forEach(e => {
                    if(e.hasAttribute('required') && !e.value.trim()) errors += '\n' + e.previousElementSibling.innerText.slice(0,-2);
                });
                if(errors) alert('Заполните поля: ' + errors);
                else myForm.submit();
            });
            clearInterval(interval);
        }
    },1000);
// проверяем наличие кнопки "Отправить" каждую секунду --- если кнопка появилась то вешаем на нее клик и очищаем интервал

код ниже вам не нужен, он исключительно для примера- имитировать долгую подгрузку формы на страницу

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// имитируем подгрузку формы --- DOM формы построится на странице только через 5 секунд
    setTimeout(function(){
        document.querySelector('body').innerHTML = `
            <div class="article container"> 
                <div class="row">
                    <div class="col-sm-6 col-md-4 col-md-offset-4">
                        <h3>Пример формы</h3>
             
                        <form action="/save"  method="post" class="myForm"><br>
                            <label>Фамилия: </label> <input type="text" ng-model="users.surname" name="surname" class="form-control" required><br>
                            <label>Имя: </label> <input type="text" ng-model="users.name" name="name" class="form-control" required><br>
                            <label>Отчество: </label> <input type="text" ng-model="users.patronymic" name="patronymic" class="form-control" required><br>
                            <label>Адрес: </label> <input type="text" ng-model="users.adress" name="adress" class="form-control" required><br>
                            <label>Телефон: </label> <input type="text" ng-model="users.phone" name="phone" class="form-control" required><br>
                            <label>E-mail: </label> <input type="text" ng-model="users.mail" name="mail" class="form-control"><br>
                            <br>
                            <button type="button" class="btn btn-default" >Отправить</button>
                        </form>
                    </div>
                </div>
            </div>
        `;
    }, 5000);
// имитируем подгрузку формы --- DOM формы построится на странице только через 5 секунд

@amr-now · 06.02.2019, 10:05

Aglar, Mr_Sergo,

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

у меня есть сайт (SPA), и эта форма подгружается в body.

Данное условие практически полностью меняет смысл исходного вопроса темы.
В процедуре подгрузки формы надо присваивать все необходимые переменные
и навешивать обработчики на ранее НЕ существовавшие элементы страницы.

Исходного кода в вопросе недостаточно было, чтобы изначально найти верное решение.

@Mr_Sergo · 06.02.2019, 10:25

amr-now, ну да
----------------
Aglar,
еще вариант -> https://codepen.io/Mr_Sergo/pe... itors=0010

JavaScript
1
2
3
4
5
6
7
8
9
10
11
document.querySelector('html').addEventListener('click',e => {
    if(e.target.classList.contains('btn')){     // если элемент по которому кликнули содержит класс 'btn' выполняем код ниже
        let myForm = document.querySelector('.myForm');
        let errors = '';
        myForm.querySelectorAll('input').forEach(e => {
            if(e.hasAttribute('required') && !e.value.trim()) errors += '\n' + e.previousElementSibling.innerText.slice(0,-2);
        });
        if(errors) alert('Заполните поля: ' + errors);
        else myForm.submit();
    }
});

как по мне дак 100500 процентов

у вас будет работать

@j2FunOnly · 06.02.2019, 10:37

Aglar, это Angular? Если да, то вы изобретаете велосипед, всё реализуется самим фреймворком.

Новые блоги и статьи Все статьи Все блоги /
сукцессия микоризы: основная теория в виде двух уравнений. 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. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и источниками (напряжения, ЭДС и тока). Найти токи и напряжения во всех элементах. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и. . .

@Aglar 0 / 0 / 0 Регистрация: 10.10.2018 Сообщений: 20
	05.02.2019, 23:10 [ТС]
	спасибо, все вроде бы работает. но столкнулся с такой проблемой: у меня есть сайт (SPA), и эта форма подгружается в body. выношу скрипт в отдельный файл и подключаю его, но при нажатии кнопку почему-то ничего не происходит... если же просто выводить форму отдельно, то все вроде бы ок. я пока в этом деле начинающий, ткните пальцем, если не сложно 0

@j2FunOnly the hardway first 2475 / 1847 / 910 Регистрация: 05.06.2015 Сообщений: 3,610
	06.02.2019, 10:37
	Aglar, это Angular? Если да, то вы изобретаете велосипед, всё реализуется самим фреймворком. 1

Валидация формы

Решение