Валидация форм AngularJS при отправке: $dirty, $valid и $invalid

⚡ Умное резюме

Валидация форм в AngularJS проверяет правильность и полноту данных, введенных в форму, прежде чем они попадут на сервер. Здесь рассматриваются четыре подхода, от простых атрибутов HTML5 и свойств области видимости до модулей автоматической валидации.

🧩 Атрибуты HTML5: Обязательный атрибут, а также поля ввода электронной почты, пароля и номера телефона обеспечивают проверку, выполняемую непосредственно в браузере, без использования скриптов.
🔍 Государственные объекты: AngularJS предоставляет доступ к переменным $dirty, $pristine, $valid и $invalid для каждого именованного элемента управления внутри именованной формы.
🏷️ Требования к именованию: И форме, и каждому элементу управления необходим атрибут имени, поскольку состояние валидации передается как formName.controlName.
???? Отключение всплывающих окон: Добавление параметра `novalidate` к форме предотвращает перехват отправки браузером, позволяя AngularJS обработать её.
💬 Отображение сообщений: Модуль ngMessages заменяет расположенные друг над другом директивы ng-show и отображает по одной ошибке за раз в порядке приоритета.
⚙️ Автоматическая проверка: Модуль jcs-autoValidate генерирует сообщения об ошибках для каждого элемента управления без какой-либо пользовательской разметки.
🔘 Отзывы о представленных работах: Кнопка Ladda запускает индикатор загрузки во время обработки запроса, сигнализируя пользователю о ходе выполнения.

Читать

Проверка формы в AngularJS

Проверка формы В AngularJS проверка правильности и полноты данных, введенных в форму, — это процесс валидации. Когда пользователь отправляет форму, сначала происходит валидация, прежде чем данные будут отправлены на сервер. Процесс валидации гарантирует, насколько это возможно, правильное заполнение полей ввода.

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

Например, адрес электронной почты всегда должен быть в следующем формате: имя пользователя@сайт.доменЕсли пользователь введёт только имя пользователя, проверка должна завершиться неудачей. Проверка выполняет эти базовые действия перед отправкой данных на сервер для дальнейшей обработки.

⚠️ Примечание к версии: Поддержка AngularJS (ветка 1.x) прекратилась 31 декабря 2021 года, и дальнейшие обновления безопасности не выпускаются. Описанные ниже методы остаются актуальными для устаревших приложений; современный Angular справляется с той же задачей, используя шаблонные или реактивные формы.

Проверка формы с использованием HTML5

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

В приведенном ниже примере показана простая форма регистрации, в которой пользователь вводит имя пользователя, пароль, адрес электронной почты и возраст. Форма содержит средства проверки, гарантирующие корректный ввод информации.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <link rel="stylesheet" href="lib/bootstrap.css">
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
</head>
<body ng-app="sampleApp">
<h1>Guru99 Global Event</h1>

<form>
    Enter your user name:
    <input type="text" name="name" required><br><br>

    Enter your password:
    <input type="password" name="password"><br><br>

    Enter your email:
    <input type="email" name="email"><br><br>

    Enter your age:
    <input type="number" name="age"><br><br>

    <input type="submit" value="Submit">
</form>
</body>
</html>

⚠️ В каждое объявление на этой странице внесены исправления. Оригиналы заявлены chrset="UTF 8", который не является ни допустимым атрибутом, ни допустимой кодировкой, и загрузил AngularJS три раза — angular-route.js сначала возникает ошибка, потому что модуль маршрутизации регистрируется в фреймворке, который еще не загружен, затем angular.min.js и angular.jsОни дважды посетили одну и ту же библиотеку. Также они забрали... bootstrap.css через <script> Тег, поэтому никакие стили не применялись. Теперь для каждого элемента списка загружается одна библиотека, версия 1.8.3, и таблица стилей корректно связана. Отступы макета построены из повторяющихся элементов.   Объекты были удалены.

Code объяснение

Для текстового поля ввода... required Этот атрибут означает, что текстовое поле не может быть пустым при отправке формы.
Следующий тип ввода — пароль. Поскольку этот тип помечен как пароль, текст, введенный в поле, будет скрыт.
Поскольку тип ввода указан как email, текст в поле должен соответствовать шаблону. имя@сайт.домен.
Если тип ввода указан как числовой, символы, набранные с клавиатуры, просто не принимаются полем.

Результат

Чтобы увидеть проверку в действии, нажмите «Отправить», ничего не вводя.

Появляется всплывающее окно с сообщением о необходимости заполнения поля, поэтому элемент управления, помеченный как обязательный, блокирует отправку, если он остается пустым.

При вводе значения в поле ввода пароля символы отображаются под символом '*'.

Ввод некорректного адреса электронной почты и нажатие кнопки «Отправить» приводит к появлению всплывающего окна с запросом символа «@». Кроме того, символы, введенные в поле «Возраст», никогда не отображаются, поскольку это поле принимает только цифры.

Всплывающие окна в браузере быстро настраиваются, но их текст и стиль изменить нельзя. Именно здесь в дело вступают свойства валидации AngularJS.

Проверка формы с использованием $dirty, $valid, $invalid, $pristine

AngularJS Предоставляет собственные свойства для проверки. Следующие свойства доступны для каждого именованного элемента управления:

$ грязный – Пользователь взаимодействовал с элементом управления
$ действительный – Содержимое поля действительно
$ неверный – Содержимое поля неверно.
$ нетронутый – Пользователь еще не взаимодействовал с элементом управления

Ниже описаны шаги для выполнения валидации в AngularJS.

Шаг 1) Использовать novalidate Это свойство указывается при объявлении формы. Оно сообщает браузеру, что валидация будет обрабатываться AngularJS.

Шаг 2) Убедитесь, что для формы определено имя, поскольку это имя используется для перехода к состоянию проверки.

Шаг 3) Убедитесь, что каждый элемент управления также имеет name атрибут по той же причине. Элемент управления без имени никогда не регистрируется в форме.

Шаг 4) Использовать нг-шоу директива для проверки свойств $dirty, $invalid и $valid.

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

<form ng-app="DemoApp" ng-controller="DemoController"
      name="myForm" novalidate>
    <p>Topic Name:<br>
        <input type="text" name="user" ng-model="user" required>

        <span style="color:red"
              ng-show="myForm.user.$dirty && myForm.user.$invalid">
            <span ng-show="myForm.user.$error.required">Username is required</span>
        </span>
    </p>
    <p>
        <input type="submit" ng-disabled="myForm.$invalid">
    </p>
</form>

<script>
    var app = angular.module("DemoApp", []);

    app.controller("DemoController", function($scope) {
        // Seed the textbox so the form starts in a valid state
        $scope.user = "AngularJS";
    });
</script>

⚠️ Исправлены две логические ошибки. В исходном варианте кнопка была отключена. ng-disabled="myForm.user.$dirty && myForm.user.$invalid", Потому как $dirty Значение было ложным до тех пор, пока пользователь не коснется поля, кнопка оставалась активной. включен на нетронутом пустом бланке, именно тот случай, который он должен был заблокировать; myForm.$invalid охватывает оба варианта. В оригинале также значение по умолчанию было заключено в скобки. $scope.Display = function () { $scope.user = 'Angular'; }Функция так и не была вызвана, поэтому текстовое поле открылось пустым, несмотря на то, что текст утверждал, что отображает «AngularJS». Теперь присваивание производится напрямую, со значением, указанным в окружающем тексте.

Code объяснение

Форме присваивается имя «myForm». Это необходимо для доступа к элементам управления для проверки данных.
novalidate Это свойство предотвращает проверку данных браузером, поэтому AngularJS может сделать это вместо него.
Директива ng-show проверяет свойства «$dirty» и «$invalid». Если текстовое поле было изменено, свойство $dirty имеет значение true; если его значение пустое, свойство $invalid имеет значение true. Когда оба свойства имеют значение true, отображается элемент span с красным текстом.
Вложенная проверка считывает свойство «$error.required», которое имеет значение true всякий раз, когда обязательный элемент управления не имеет значения, и отображает сообщение «Имя пользователя обязательно».
Кнопка отправки отключена. ng-disabled всякий раз, когда форма в целом недействительна.
Контроллер устанавливает начальное значение текстового поля равным «AngularJS», поэтому форма открывается в корректном состоянии, и процесс проверки становится проще наблюдать по мере удаления текста.

Результат

При первом отображении формы в текстовом поле отображается «AngularJS», и кнопка отправки активна. Как только текст удаляется, появляется сообщение об ошибке, и кнопка отключается.

На скриншоте выше показаны две вещи:

Кнопка отправки недоступна.
В текстовом поле «Тема» отсутствует название темы, поэтому отображается сообщение об ошибке «Требуется имя пользователя».

Как отобразить ошибки валидации с помощью ngMessages

Приведенная выше схема работает, но не масштабируется. Поле с четырьмя ограничениями требует четырех вложенных ограничений. ng-show Если несколько из них одновременно выйдут из строя, все сообщения появятся одновременно. ngMessages Этот модуль, поставляемый отдельно командой AngularJS, решает обе проблемы: он отображает по одному сообщению за раз, в том порядке, в котором они были написаны.

Загрузите модуль и добавьте его в качестве зависимости.

<script src="https://code.angularjs.org/1.8.3/angular-messages.js"></script>
<script>
    angular.module("DemoApp", ["ngMessages"]);
</script>

В этом случае разметка будет восприниматься как список правил, а не как набор условий.

<input type="text" name="user" ng-model="user"
       required ng-minlength="4" ng-maxlength="20">

<div style="color:red" ng-messages="myForm.user.$error"
     ng-if="myForm.user.$dirty">
    <div ng-message="required">A topic name is required</div>
    <div ng-message="minlength">Use at least 4 characters</div>
    <div ng-message="maxlength">Use no more than 20 characters</div>
</div>

Три детали обеспечивают его хорошую работу на практике. ng-messages атрибуты указывают на элемент управления $error Объект, а не логическое значение, поэтому условие не нужно повторять. Только первое совпадение. ng-message Отображает, что означает, что пустое поле сообщает о необходимости заполнения, вместо того чтобы также выдавать ошибку из-за его длины. Добавление ng-messages-multiple Это меняет такое поведение, когда действительно необходимо перечислить все ошибки.

Обернитеping блок в ng-if="myForm.user.$dirty" Форма остается невидимой до тех пор, пока пользователь не введет что-либо. Замена $touched для $dirty Это задерживает отправку сообщения еще дальше, пока внимание не переключится с этого поля, что обычно является более удобным вариантом в длинной регистрационной форме.

Одно предостережение: ngMessages Он поставляется в отдельном файле, поэтому, если не добавить тег <script> или указать зависимость модуля, блок вообще ничего не отобразит, и в консоли не будет никакой ошибки, объясняющей это.

Написание сообщений от руки — точный, но монотонный процесс. В следующем разделе рассматривается модуль, который генерирует их автоматически.

Проверка формы с использованием AngularJS Auto Validate

AngularJS может автоматически проверять все элементы управления в форме без написания пользовательского кода для проверки или сообщений об ошибках. Это достигается за счет использования модуля сообщества под названием «jcs-autoValidate».

Благодаря этому модулю для выполнения проверки или отображения сообщений не требуется никакого специального кода; все обрабатывается внутри jcs-autoValidate.

В приведенном ниже примере представлена простая форма с одним обязательным текстовым полем. Если поле не заполнено, отображается сообщение об ошибке.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <link rel="stylesheet" href="lib/bootstrap.css">
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
    <script src="lib/jcs-auto-validate.min.js"></script>
</head>
<body>
<h1>Guru99 Event</h1>

<div ng-app="DemoApp">
    <form name="myForm" novalidate>
        <div class="form-group">
            <label for="user">Topic Name:</label>
            <input class="form-control" type="text"
                   id="user" name="user" ng-model="user" required>
        </div>
        <div class="form-group">
            <input type="submit">
        </div>
    </form>
</div>

<script>
    var app = angular.module('DemoApp', ['jcs-autoValidate']);
</script>
</body>
</html>

⚠️ Исправление: В оригинале элемент управления был обозначен следующим образом: id="user" только. jcs-autoValidate обращается к элементу управления через форму, поэтому name Этот атрибут является обязательным, и сообщение никогда не появлялось без него. В исходном коде также были загружены две разные версии AngularJS, 1.6.4 из... Google CDN используется параллельно с версией 1.6.9 и никогда не подключается напрямую. Bootstrap даже несмотря на то, что пример зависит от него form-group и form-control классы для позиционирования текста ошибки.

💡 Примечание: jcs-autoValidate — это проект, созданный сообществом, и его активная поддержка прекращена. Он по-прежнему пригоден для использования в существующих приложениях AngularJS, но встроенная функция... ngMessages Представленный ранее подход является более безопасным выбором для всего нового.

Code объяснение

В комплект входит скрипт “jcs-auto-validate.js”, содержащий весь функционал автоматической проверки.
Каждый элемент управления и окружающий его div помещаются внутрь класса «form-group», куда модуль и внедряет свое сообщение.
Элемент управления содержит как идентификатор, так и name и Bootstrap поставляет form-control укладка.
Модуль “jcs-autoValidate” указан в качестве зависимости модуля AngularJS.

Результат

По умолчанию форма отображается точно так, как написано.

При отправке пустой формы отображается сообщение «Это поле обязательно для заполнения», полностью сгенерированное модулем jcs-autoValidate. После проверки формы остается лишь то, что видит пользователь во время ее отправки.

Отзывы пользователей с кнопками Ladda

Кнопки «Ladda» — это фреймворк, построенный на основе JavaСценарий Это создает визуальный эффект при нажатии кнопок.

Если кнопке присвоен атрибут «ladda» и она нажата, отображается эффект вращения. Для дополнительных визуальных эффектов доступны различные стили данных.

В приведенном ниже примере показана простая форма с кнопкой отправки. При нажатии на кнопку на ней появляется эффект вращения.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <link rel="stylesheet" href="lib/bootstrap.css">
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
    <script src="lib/angular-ladda.min.js"></script>
</head>
<body>
<h1>Guru99 Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <form name="myForm" novalidate ng-submit="submit()">
        <button class="btn btn-primary" type="submit"
                ladda="submitting" name="sbutton"
                data-style="expand-right">Submit</button>
    </form>
</div>

<script>
    var app = angular.module('DemoApp', ['angular-ladda']);

    app.controller('DemoController', function($scope) {
        $scope.submitting = false;

        $scope.submit = function() {
            $scope.submitting = true;
        };
    });
</script>
</body>
</html>

⚠️ Исправление: оригинал загружен angular-ladda.js и angular-ladda.min.js Вместе это приводит к двойной регистрации одного и того же модуля и повторному подключению двух версий AngularJS. Также было указано следующее: jcs-autoValidate в качестве зависимости, которая в этом примере никогда не используется. Здесь загружается одна копия каждой библиотеки.

Code объяснение

"ng-отправитьДиректива вызывает функцию с именем «submit», которая изменяет атрибут ladda кнопки.
Атрибут ladda относится к фреймворку Ladda и именно он добавляет эффект вращения. Его значение привязано к submitting Переменная.
Свойство data-style — это ещё один атрибут Ladda, который позволяет выбрать другой визуальный эффект.
Для корректной работы фреймворка необходимо добавить модуль 'angular-ladda' в приложение AngularJS.
submitting Переменная инициализируется значением false, поэтому кнопка запускается без эффекта вращения.
Функция отправки устанавливает submitting Установите значение true, что применит эффект. В реальном приложении оно будет сброшено на false после получения ответа от сервера, иначе кнопка будет вращаться бесконечно.

Результат

При первом отображении формы кнопка отправки отображается в простом виде.

При нажатии кнопки, submitting Переменная устанавливается в значение true. Это значение достигает атрибута «ladda» кнопки, вызывая эффект вращения.

Часто задаваемые вопросы (FAQ)

Переменная `$dirty` становится `true` при изменении значения. Переменная `$touched` становится `true`, когда поле теряет фокус. Используйте `$touched`, чтобы отложить сообщение об ошибке до тех пор, пока пользователь не переключится на другое поле, что воспринимается менее агрессивно.ping.

Добавьте директиву ng-pattern с регулярным выражением, например, ng-pattern=”/^[0-9]{6}$/”. В этом случае ошибка отобразится как $error.pattern, о которой ngMessages может сообщить как о любом встроенном ограничении.

Да. Инструменты искусственного интеллекта считывают разметку и генерируют соответствующие блоки required, ng-pattern и ngMessages. Всегда проверяйте регулярные выражения, поскольку сгенерированные шаблоны email и phone часто отклоняют корректные входные данные.

Искусственный интеллект быстро проверяет три наиболее распространенные причины: отсутствие атрибута name в форме или элементе управления, отсутствие атрибута ng-model и отключение параметра novalidate, из-за чего браузер сначала перехватывает отправку данных.

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

Валидация форм AngularJS при отправке: $dirty, $valid и $invalid

Проверка формы в AngularJS

Проверка формы с использованием HTML5

Code объяснение

Результат

Проверка формы с использованием $dirty, $valid, $invalid, $pristine

Code объяснение

Результат

Как отобразить ошибки валидации с помощью ngMessages

Проверка формы с использованием AngularJS Auto Validate

Code объяснение

Результат

Отзывы пользователей с кнопками Ladda

Code объяснение

Результат

Часто задаваемые вопросы (FAQ)

Подведем итог этой публикации следующим образом:

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