HTML-формы в AngularJS


Оглавление (нажмите, чтобы открыть):

Stepan Suvorov Blog

Release 2.0

AngularJS и проверка данных формы

Пост состоит из следующих частей:

  • Проверка данных в HTML5
  • AngularJS расширения для валидации
  • Свои кастомные проверки данных на AngularJS
  • Вывод сообщений об ошибках и ng-messages

HTML5 валидация данных

В первую очередь следует отметить, что у тега

После чего в нашем скоуп будут:

И при этом каждый объект formController и ngModelController содержит следующие свойства (касательно валидации):

  • $valid – true/false – валидности введенных данных относительно заданных правил
  • $invalid – false/true – обратный к предыдущему
  • $pristine – true, если форма/элемент еще не использовались
  • $dirty – обратные к предыдущему
  • $touched – на элементе произошло событие blur
  • $error – объект ошибки
  • $isEmpty(value) – вспомогательный метод, который проверяет является ли значение undefined, ”, null или NaN
  • $validate() – true/false – запускает все валидаторы зарегистрированные на модели
  • $setValidity(validationErrorKey, isValid) – задание значения валидности для одного из критериев
  • $setPristine()/$setDirty() – сеттеры для $pristine/$dirty
  • $setUntouched()/$setTouched() – сеттеры для $touched

Так же ngModelController содержит свойство $validators, в котором мы можем определять наши методы для проверки данных, то есть:

Вот тут можно посмотреть как изменяются свойства в зависимости от изменения значений полей:

Ангуляр полностью дублирует атрибуты валидации HTML5, причем в некоторых случаях оставляя их без изменения (как required), а в некоторых изменяет названия атрибута (ng-maxlength); плюс использует свои дополнительные:

  • required – просто парсит HTML5 атрибут
  • ng-minlength/ng-maxlength – ограничения по количеству символово (как и maxlength)
  • type – использует атрибут HTML5
  • ng-pattern – отличие в том что мы можем подставлять паттерн динамически и ошибка по умолчанию не тригерится наверх (сравнить)

!Внимание :

  • все валидируемые елементы должны содержать директиву ng-model, именно благодаря ней мы имеем доступ к ngModelController
  • если у вас в scope свойство, которая не соответствует критериям, – оно выведено не будет.

Свои кастомные проверки данных на AngularJS

Для дополнительных проверок можно создать директиву, которая будет навешиваться на элемент.

C директивой все понятно. Но вот то, как мы вернем потом значение, не так однозначно, особенно в случае асинхронных операций.

Вот пример проверки уникальности записи от ng-newsletter, атрибут-директива для элемента формы, которая следит за изменением значения:

А вот так (взято из оф доки) мы можем переопределить стандартную проверку:

И есть еще один интересный пример с хабра и использованием свойств котроллера модели $parsers и $formatters:


хотя думаю можно было ограничится просто использованием свойства $validators.

Вывод сообщений об ошибках и ng-messages

Начиная с Angular 1.3 появилась возможность подключить прекрасный модуль ngMessages, который серьезно упрощает работу по выводу ошибок. В старых версиях нам приходилось выдумывать что-то с ng-if/ng-show, а теперь все можно сделать так:

Поиграться с кодом можно тут.

!Внимание : при этом не забудьте подключить в зависимости ваш модуль:

ну и конечно подключить .js файл.

Стилизация валидируемых полей

Для каждого состояния Ангуляр добавляет специальный класс:

  • ng-valid/ng-invalid
  • ng-valid-[key] / ng-invalid-[key] – отдельный для каждого ключа заданного через $setValidity
  • ng-pristine/ng-dirty
  • ng-touched/ng-untouched
  • ng-pending – ждет асинронной валидации от $asyncValidators

Сейчас вот задался вопросом: “Почему до сих пор нет никакого готового (и популярного) модуля для валидации данных?” Чтобы можно было на всю форму (например) навесить директиву и передать ей конфиг заполняемых полей. Если что-то знаете в тему – подскажите пожалуйста в комментариях. Иначе прийдется делать свой велосипед.

AngularJS Form

AngularJS provides a small and well-defined set of constructs that make standard form-based operations easier. For a form, we should consider three points:

  1. Allowing user input
  2. Validating those inputs against business rules
  3. Submitting the data to the backend server

form in AngularJS is extend from html form . Now it’s a directive. When Angular encounters the form tag, it executes the form directive. This directive creates an instance of a special Angular >FormController that is made available to us on the current scope. It’s this controller which prov >ng-model which creates an instance of NgModelController .

Validation

It already has built-in support for validating. Validations are automatically setup by AngularJS according to:

  • Input type — text, numbers, e-mails, URLs, radios, checkboxes, and a few others. (such as ).
  • Val >required , min , max , and custom attributes such as ng-pattern , ng-minlength , and ng-maxlength .

So AngularJS will check required attribute. When input is empty, the error label will be shown.

More details, from directive creates an instace of FormController and published into the scope using the name attribute. Then the ins >ng-model create NgModelController and published as a property of the form instance using the name attribute. $error and $dirty is of NgModelController .

$error

It contains a list of all errors for the specific ng-model directive. From above example, required is validation attribute. So to check the validation, we need to follow this format:

When val >$error.validation will be true. We could use it to decide whether to show error messages.


States by ng-model

Bes >$error , every element that uses ng-model — including input, textarea, and select — has states defined on the associated model controller:

  • $pristine: True if user does not interact with the input. Any updates to the input field and $pristine is set to false. Once false, it never flips, unless we call the $setPristine() function on the model controller.
  • $dirty: Reverse of $pristine. This is true when the input data has been updated. This gets reset to false if $setPristine() is called.
  • $touched: True if the control ever had focus.
  • $untouched: True if the control has never lost focus.
  • $valid: True if there are validations defined on the input element and none of them are failing.
  • $invalid: True if any of the validations defined on the element are failing.

So from above example:

If there is no form.formName.$dirty , the val >$pristine is true and $pristine is false. So here, the error message will never be shown until user begins to interact with the input.

CSS to an input element

Based on the model state, Angular also adds some CSS classes automatically to an input element.

  • ng-valid/ng-invalid : This is used if the model is val >ng-pristine/ng-dirty : This is used if the model is pristine or ng-dirty.
  • ng-untouched/ng-touched : This is used when the input is never visited or not.
  • ng-invalid- /ng-valid- : This is used for a specific failed/sucessed val >ng-empty/ng-not-empty : This is used if the model is empty or not
Мастер Йода рекомендует:  Изучение HTML с нуля

For example, when we check the page by Inspect of browser (not your own code), we could find a list of class already added in input:

When we type something, it could change to:

So we could customize input element by these classes according to different state. For example:

Points to be careful

If data in the model is invalid, it does not show up in the view and the view element is empty.

For example, we set age value as “2” in controller in init method. But on the view, we set a “min=’5’” validation. So the input is empty when we load page.

Error messages by ng-messages

ng-messages and ng-message that allow us to show/h >ng-show/ng-hide .

To use them, we need to add angular-messages.js and add ngMessages module.

Think about a lot of validation in one input:

We could change it to:

ng-messages-multiple

With above example, each time, only one message will be shown. (Always the upper one has higher priority). When user typed “-1”, both $error.min and $error.pattern will be true. But only error message for min will be shown. To avoid this problem:

Message reuse and override

Reuse


Because many messages are the same in a big and complex form, we could reuse them by defining all messages in a sepereted file:

And include it by ng-messages-include :

Override

If generic messages are not enough to match all input fields, we could override messages defined in the remote template by redefining them within the directive container.

Custom validation

There two ways to create a custom validation:

By AngularJS-UI

By our onw directive

Define a directive:

Add it in input element:

Submit

Form in Angular has a different role to play as compared to traditional html form that posts data to the server. We could not find action attribute. So how to submit data?!

The standard form behavior of posting data to the server using full-page post-back does not make sense with a SPA framework such as AngularJS. In Angular, all server requests are made through AJAX invocations originating from controllers, directives, or services. While the traditional one will refresh the whole page.

So two ways to do it:

  1. By ng-submit
  1. By binding function to the button directly

Then, we need to know that from controller also has some APIs and properties as model controller:

  • $setValidity(validationKey, status, childController) : This is similar to the $setValidity API of NgModelController but is used to set the val >$setDirty() : This is used to mark the form dirty.
  • $setPristine() : This is used to make the form pristine. This is often used to mark the form pristine after persisting the data to server. The $setPristine call propagates to all model controllers registered with the form, so all child inputs are also set back to the pristine state.
  • $setUntouched() : This is used to mark the form untouched. This is mostly called in sync with $setPristine , after data is submitted.

Other than the state manipulation API, there are some handy properties:

They are similar to model controller properties except for the $error property. It’s in fact a bit more complex. It aggregates all failures across all contained inputs. The $error ’s property corresponds to the failing error condition and the value is an array of controllers that are inval >required errors, $error.required should be an array with three controllers with this kind of error.

Any way, we use the $invalid property of the form controller to verify if there are validation errors before we perform a submit.


So submit button will only be available when no val >$valid/$invalid to set css :D.

Points to be careful

In general, instead of disabling a submit button, we prefer to inform user all val >ng-disabled , when user loads the page and clicks submit button directly without touching others. Nothing is submitted as the form is invalid, but validation errors on its child elements like input do not show up at all. Look at one label:

form.formName.$dirty disables validation messages until user has touched the element. It’s why here.

So in submit() , we could set a flag to fix this problem.

So now update label:

When user clicks submit button, we force val >submitted

So now update label again:

For the moment, we only need to pass model controller and its validation without caring the conditions!

Reset

The standard way to reset a form is to call the reset method on the form object such as document.forms[«formName»].reset() or to use type=»reset» for a button.

But we could also define a function by ourselves to add on the reset button

Создание простой контактной формы с помощью Angularjs и php

Главное меню » Блог-платформа wordpress » Создание простой контактной формы с помощью Angularjs и php

Контактная форма представляет собой стандартную веб-страницу, которая доступна на каждом сайте. Это позволяет посетителям сайта связаться с владельцами сайтов или поставщиками услуг, которые отвечают за поддержание этого веб-сайта. Так что мы думаем, почему бы не создать простую контактную форму с помощью Angularjs и php, чтобы получать сообщения от веб-сайтов, читателей и/или пользователей.

Мы используем Angularjs для переднего плана и php на стороне сервера. Мы будем писать код на php, который принимает данные из Angular формы и отправляет по электронной почте администратору сайта. Создайте папку с именем “contact-form” в вашем веб-каталоге приложений и создайте образец оформления страницы HTML – index.html. Теперь скопируйте и вставьте, код ниже в файл index.html.

Php код для отправки электронной почты

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

UA Blog

Blog on instersting topics

Введение в реактивные формы Angular (Reactive Forms Angular)

Angular предоставляет два способа работы с формами: шаблонные формы и реактивные формы, последние еще называют формами управляемые моделью. Шаблонные формы используются по умолчанию в Angular для работы с формами, директивы в шаблонах используются для построения внутреннего представления формы. В реактивных формах вы создаете собственное представления формы в классе компоненте.
Хотя реактивные формы могут показаться сложными при начале работы с ними, они позволяют сделать формы более гибкими и помогают держать логику внутри класса компонента и делают шаблоны более простыми.
Примеры случаев где реактивные формы очень удобны:

  • написания кастомных валидаторов
  • динамическое изменение валидации
  • динамическое добавления элементов формы


Давайте рассмотрим как интегрировать реактивные формы в ваше Angular приложение.

Импорт модуля ReactiveFormsModule

Для работы с реактивными формами, мы будем использовать модуль ReactiveFormsModule вместо FormsModule.

Пример шаблона: formGroup, ngSubmit & formControlName

При использовании реактивных форм вся логика содержится в классе компонента, поэтому код шаблона выглядит очень простым:

Если вы используете Angular 2.x, добавьте директиву novalidate в тег формы, так как Angular переопределять HTML5 валидацию. В Angular 4+ директива novalidate добавляет автоматически.
Рассмотрим директивы formGroup, ngSubmit & formControlName детальней

  • formGroup — форма будет трактоваться как FormGroup в классе компоненте. Директива formGroup позволяет дать имя форме.
  • ngSubmit: Позволяет зарегистрировать обработчик сабмита формы
  • formControlName: Каждое поле формы должно иметь директиву formControlName с значением имени, которое будет
    использоваться в классе компоненте

Класс компонент

В классе компоненте мы определим группу формы и каждое поле в нашей группе.
При создании FormControl можно задать начальное значения поля.
Обратите внимания как имена группы формы и имена полей совпадают с теми которые мы использовали в шаблоне. Также необходимо инициализировать форму в методе жизненного цикла ngOnInit

Мастер Йода рекомендует:  Кросспостинг или как обогнать ближайших конкурентов

FormBuilder

Мы можем упростить код с помощью класса FormBuilder, который позволяет нам отказаться от ручного создания элементов FormControl и FormGroup.

Валидация

Добавления валидации в форму происходит очень просто. Нужно импортировать класс Validators и передать массив как начальное значения поля формы.
Первое значения в массиве отвечает за начальное значения поля второе отвечает за валидаторы. Кроме того можно передать несколько валидаторов.

Получения доступа к значения элементов формы и их валидности в шаблоне

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

Обратите внимания на то как можно получить доступ как с myForm.get(‘login’) так и myForm.controls.login, также мы можем получить доступ к ошибкам с помощью .hasError(‘required’) или .errors.required. Оба способы аналогичны и это дела вкуса что использовать

Также мы делаем кнопку отправки формы неактивной если форма не валидна.

HTML Forms in AngularJS

This tutorial will show you how to collect and validate HTML form data using the two-way data binding of AnguarlJS. In this tutorial, we’ll learn how to implement a simple user registration form using Angular. Along the way, we’ll look at basic HTML and show what needs to be changed in order to incorporate AngularJS.

Prerequisities

  • Install Node.js.
  • Clone the AngularJS seed project.


Form HTML

The HTML for our signup form is shown below. Bootstrap has been used to make the site more visually appealing.

The form should look like the following image.

Collecting Data

In jQuery, individual form inputs are read using code like this:

Because AngularJS supports two-way data binding, we don’t need to explicitly read the inputs. Instead, when the form input changes, it is automatically reflected in the controller’s $scope . To verify this, add the following span to the HTML before the closing form tag. This snipper relies on a variable named formInfo .

AngularJS has a directive named ng-model which helps to bind an input to a variable. Let’s apply the ng-model directive to the three input elements in the form. Here is the updated HTML form:

As you can see, the ng-model directive has been attached to each of the input elements. Each input is bound to a specific field in the formInfo object. Now, as the user enters data into the input elements, formInfo automatically gets updated. You can see this code in action by looking at this working demo. Using the same formInfo variable we can access the form data without reading each element value individually inside our controller. For that, we need to define a $scope.formInfo variable inside our controller, MyCtrl1 . After making these changes, this is what app/js/controllers.js looks like:

We have also defined a function named saveData() which will be called when the user clicks the Sign Up button.

Next, we need to attach a ng-controller directive to the form itself.

Next, attach a ng-click directive to the Sign Up button:

Inside the saveData() function, add a console.log($scope.formInfo); just to check if we are getting the form data collection in our controller using the $scope . Restart the node server, browse to the HTML page, and check your browser console. You should see some thing like this:

Now, this collected data can be stored in a database.

Validating the Inputs

We also need to validate, if the data that we received from the $scope is valid. If it’s not, we must show some validation errors. The ng-show directive shows or hides an element based on the value of an expression. We’ll be using it to show error messages. Begin by defining three $scope variables – $scope.nameRequired , $scope.emailRequired , and $scope.passwordRequired . We’ll validate the name, email, and password in the saveData() function as shown in the updated app/js/controllers.js .

In the HTML page, add a span for each input element to display error message as shown below;

Restart the node server and try to click the Sign Up button with empty input elements. You should see the appropriate error messages.

Conclusion

In this tutorial, we learned how to read data from a form and validate it using AngularJS. I would recommend reading the AngularJS API docs for deeper insight. In the meantime, a working demo is available here.

Angular 2 — формы

Дата публикации: 2020-11-15

От автора: существует возможность создавать во второй версии Angular формы, использующие двустороннюю привязку через директиву ngModel. Давайте рассмотрим, как это реализуется.

Шаг 1. Создайте модель, которая представляет собой модель товаров. Создайте файл с именем products.ts.

Шаг 2 — Поместите в этот файл следующий код.

Как создать сайт самому?


Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

проверил все флажки формы в angularjs

Привет, у меня есть форма в angularjs, и эта форма имеет много флажков при первом щелчке по флажку i, e check Все, что я хочу проверить все флажки. как я могу сделать это с угловым для каждого цикла поля здесь, это мой пример кода, который я пытаюсь использовать в кодах snipt.

Один подход (если свойства флажка находятся на одном объекте с другими свойствами)

Вы могли (не обязательно должны) хранить имена свойств в массиве, а затем вы могли бы использовать цикл forEach для установки самого свойства на объект vm.quizSettings :

Гораздо лучше (если свойства флажка одни на одном объекте)

Было бы намного лучше, если бы вы могли избежать хранения имен свойств в виде строк. Если все ваши свойства checkbox boolean для обновления были одни на собственном объекте, тогда он становится намного чище:

Еще лучше (просто украсьте флажками, к которым должно применяться это поведение)

Создайте настраиваемую директиву selectAllListener которая прослушивает событие «SelectAll» и обновляет значение ngModel до true когда это событие поднято.

Добавьте к вашим флажкам директиву decorator select-all-listener :

Как отправить форму в Angular

0 Harrison [2014-07-19 21:09:00]

У меня есть html-форма, которую я проверяю с помощью углового контроллера. Если проверка не выполняется, я применяю некоторые классы к html. Если он пройдет, я хочу, чтобы форма представляла себя. Хотя это кажется очень простым, я не нашел простого способа сделать это. Один из методов, которые я нашел, использует функцию $scope.$broadcast чтобы передать форму для отправки, однако я использую Controller as Ctrl синтаксис Controller as Ctrl поэтому я бы предпочел не использовать $scope . Есть ли способ отправить форму с контроллера?

Мой упрощенный HTML

Я немного новичок в Angular, поэтому простите меня, если это очевидный вопрос;)

EDIT: Мне нужно уточнить, что я хочу избежать отправки формы с помощью AJAX (то есть $http.post ). В принципе, я хочу, чтобы эквивалент контроллера вызывал form.submit() .

USE CASE: Позвольте мне объяснить, что именно я пытаюсь сделать.

Таким образом, Пользователь получает немедленную обратную связь, если они ввели неправильные учетные данные. Все это я выполнил, за исключением фактического представления формы.

Создание приложения на AngularJS и Firebase: Часть 2

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

Сегодня мы пойдём ещё дальше: создадим страницу регистрации и посмотрим как осуществить валидацию форм в AngularJS.

Стартуем

Давайте начнём с создания копии кода из предыдущего урока.

git clone https://github.com/jay3dec/AngularJS_Firebase_Part1.git

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


После установки всех зависимостей запускаем сервер.

Мастер Йода рекомендует:  Windows — всё по этой теме для программистов

Отправившись по адресу http://localhost:8000/app/#/home вы должны увидеть запущенное приложение.

Создание странички регистрации

Начнём с создания страницы для регистрации новых пользователей.

Начнём с создания страницы для регистрации новых пользователей. Отправляемся в AngularJS_Firebase_Part1/app и создаём папку под названием register . Внутри папки register создаём файлы register.html и register.js . Вот и содержимое файла register.html :

Как видно из примера, мы используем Bootstrap.

В register.js мы определим маршруты для доступа к представлению с формой регистрации. У объекта $routeProvider есть метод when , с помощью которого можно создать новый маршрут. В качестве параметров необходимо передать templateUrl , который будет задействован в index.html . В то же время мы определим контроллер controller для новой области видимости $scope представления регистрации. В контроллере будет располагаться логика, которая управляет представлением. Содержимое:

Теперь открываем app.js и включаем новый модуль myApp.register .

Для отображения страницы регистрации нам необходимо подключить register.js в основном HTML шаблоне приложения. Открываем index.html и добавляем следующее:

Перезагружаем сервер и отправляемся по адресу http://localhost:8000/app/index.html#/register. В результате мы должны увидеть следующее:

Теперь давайте создадим ссылку, по которой пользователь сможет открыть страницу регистрации. В home.html и register.html добавляем якоря sign up и sign in соответственно.

Валидация форм в AngularJS

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

В AngularJS есть FormController, который используется при работе с формами.

В FormController есть несколько свойств: $pristine , $dirty , $invalid , $valid , и т.д. Далее мы их рассмотрим более детально, а некоторые из них применим для валидации формы регистрации.

Для начала нам нужно немного преобразовать наш HTML и добавить сообщения об ошибках валидации. В register.html добавляем следующий HTML код.

Сохраняем изменения, пере-запускаем сервер, обновляем страницу register . В результате вы должны увидеть следующее:

Как видно из предыдущего скриншота сообщения валидации отображаются вместе с формой. Мы же должны их отображать только в случае, если предоставленные данные неподходящего нам формата.

В AngularJS есть специальное средство ngShow , которое предназначено для отображения какого-то HTML в зависимости от условий (простыми словами это средство представлено в виде атрибута). Таким образом благодаря ngShow мы отобразим сообщение об ошибке, если электронный адрес будет неподходящего нам формата. А как же нам определить, правильный email или нет? В FormController есть свойство $invalid , которое будет равно True в случае если значение поля неверно. Таким образом regForm.email.$invalid будет содержать true , если email неподходящего формата. Если использовать в паре $invalid и ngShow , то можно добиться нужного нам результата:

После сохранения и перезагрузки сервера вы больше не должны видеть на странице сообщения об ошибках. Теперь пробуем ввести какие-то неверные данные и видим, что сообщение всплывает. Пробуем ввести правильный email и видим, что сообщение исчезает. Однако сообщение о неправильной длине пароля до сих пор присутствует. Давайте и это исправим.

Для нужного нам функционала можем воспользоваться атрибутом ng-minlength. Зададим минимальное количество символов и далее воспользуемся ngShow, как это было сделано в предыдущем примере:

Далее измените элемент, где находится сообщение об ошибке:

Если пользователь введёт пароль из меньшего количества символов, чем мы указали, то regForm.password.$error.minlength будет равно «true» и сообщение об ошибке всплывёт.

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

Теперь неплохо было бы как-то выделить сообщения об ошибках. Сделать это можно с помощью ngClass, отталкиваясь от того же свойства $invalid . Добавляем ngClass прямо в родительский div полей email и password.


Перезагружаем сервак, обновляемся, пробуем ввести неправильные данные и видим следующее:

На данный момент кнопка Register включена даже если данные в форме не верны. Давайте отключим её до тех пор, пока пользователь не устранит все недочёты. В AngularJS есть атрибут ngDisabled, который деактивирует элементы в зависимости от условий. Если email и password не верны, то значения в user.email и user.password не будут заданы. Поэтому мы можем использовать данные поля для определения активности кнопки. Измените кнопку регистрации:

В результате значение ng-disabled будет равно true если user.email и user.password не равны false .

Сохраняем изменения, перезапускаем сервер и обновляем форму регистрации. Кнопка регистрации будет не активна до тех пор пока пользователь не предоставит все данные в нужном формате.

Валидация формы входа пользователя в систему

Теперь давайте немного преобразуем форму входа пользователя в систему и добавим валидацию. Сначала сами можете попробовать, а затем посмотрите готовое решение в home.html :

Заключение

В этом уроке мы создали страницу регистрации и все сопутствующие элементы: маршрут, валидацию, а так же преобразовали форму входа в систему.

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

5 последних уроков рубрики «HTML5»

Расширяем возможности HTML за счёт создания собственных тегов

В этом уроке я покажу процесс создания собственных HTML тегов. Пользовательские теги решают множество задач: HTML документы становятся проще, а строк кода становится меньше.

Определение доступности атрибута HTML5 с помощью JavaScript

Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.

HTML5: API работы с вибрацией

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

Создание форм с помощью Webix Framework — 4 практических примера

Веб дизайнеры частенько сталкиваются с необходимостью создания форм. Данная задача не простая, и может вызвать головную боль (особенно если вы делаете что-то не стандартное, к примеру, много-страничную форму). Для упрощения жизни можно воспользоваться фрэймворком. В этой статье я покажу вам несколько практических приёмов для создания форм с помощью фрэймворка Webix.

Знакомство с фрэймворком Webix

В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.

AngularJS Form Val >

Today we’ll be looking at at the ways that Angular helps us do form validations. We’ll be talking more on forms using Angular (just like our other article: Submitting AJAX Forms: The AngularJS Way). Don’t worry though, that article is not required.

We’ll focus on client side validation and using the built in Angular form properties. Here’s a quick demo.

Requirements

  • Name is required
  • Username is not required, minimum length 3, maximum length 8
  • Email is not required, but has to be a valid email
  • Form submit is disabled if the form isn’t valid
  • Show a required or invalid email error
  • Alert awesome if submitted correctly

Now that we know what we want, let’s get to building.

Angular Form Properties $valid, $invalid, $pristine, $dirty

Angular provides properties on forms that help us validate them. They give us various information about a form or its inputs and are applied to a form and inputs.

Property Class Description
$valid ng-valid Boolean Tells whether an item is currently valid based on the rules you placed.
$invalid ng-invalid Boolean Tells whether an item is currently invalid based on the rules you placed.
$pristine ng-pristine Boolean True if the form/input has not been used yet.
$dirty ng-dirty Boolean True if the form/input has been used.
$touched ng-touched Boolean True if the input has been blurred.

Angular also provides classes on the form and its inputs so that you can style each state accordingly.

Добавить комментарий