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

@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? Если да, то вы изобретаете велосипед, всё реализуется самим фреймворком.

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита табличной части. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

@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

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

Решение