Очень простой способ валидации формы на AngularJS, который создается и настраивается за пару минут. Что будем делать:
- Создадим форму заявки обратного звонка
- Не правильно заполненные поля будет подсвечиваться в режиме реального времене
- Проверим форму на валидность
- Отправим все данный на сервер(ajax.php)
- Проверим данные, отправим сообщение если все ок, иначе вернем ошибку
0) Подключение необходимых библиотек
Мы будем использовать не только ангуляр но и библиотеку ангуляра ui-utils
<script type="text/javascript" src="js/angular.min.js"></script> <script type="text/javascript" src="js/ui-utils.min.js"></script>
Это все библиотеку которые нам понадобятся
1) Создание формы
Вот готовая форма:
<div ng-app="test-app"> <form action="" ng-controller="ctrlForm" name="form" ng-submit="submit()"> <input type="text" placeholder="ИМЯ" ng-model="user.name" required> <input type="text" ng-model="user.phone" ui-mask="+7 (999) 999-99-99" required> <input type="email" placeholder="E-MAIL" ng-model="user.email"> <input type="submit" class="btn red" value="Отправить"> </form> </div>
ng-app="test-app"
— это название нашего приложения на angularJS, все контроллеры этого приложения должны быть внутри него. Обычно я его вешаю на body.
ng-controller="ctrlForm"
— это название нашего контролера
name="form"
— как ни странно название нашей формы, почему это важно будет понятно в контроллере ctrlForm
ng-submit="submit()"
— название функции в контроллере которая будет обрабатывать данные
ng-model="user.name"
— название модели. Все данные будут хранится в объекте user.
ui-mask="+7 (999) 999-99-99"
— маска для телефона, ради этой строчки мы и подключили ui-utils.min.js
2-4) Пункты отдельные но все будет в одном js, в одном контроллере
Но для начала строчка css
form .ng-dirty.ng-invalid{ border: 1px solid #FD0000; }
.ng-dirty.ng-invalid
поля формы будут подсвечивать если dirty — тронуты, invalid — невалидны
Ну и главный код
'use strict'; var app = angular.module('test-app', ['ui.utils']); app.controller('ctrlForm',function($scope, $http) { $scope.user = {}; $scope.submit = function() { if ( $scope.form.$valid ) { $http.post( 'ajax.php', $scope.user ).success(function( res ){ if ( res.res=='ok') { $scope.user = {}; $scope.form.$setPristine(); alert('Сообщение отправлено'); } else { alert('Возникла ошибка'); } }).error(function(err){ alert(err); }); } } });
Если вкратце: включаем строгий режим(use strict
), создаем наше приложение и подключаем к нему ui.utils
, создаем наш контроллер, создаем объект user, создаем функцию submit, проверяем нашу форму на валидность($scope.form.$valid
), вот здесь form это название нашей формы(name="form"
), если форма валидна отправляем данные($scope.user
) в ajax.php.
ajax.php:
$req = json_decode( file_get_contents('php://input'), true ); //подключаем класс для работы с email require 'class.simple_mail.php'; if ( $req ) { //отправляем данные с помощью функции mail if (!empty($req['name'])) $name = $req['name']; if (!empty($req['phone'])) $phone = $req['phone']; if (!empty($req['email'])) $email = $req['email']; if (!empty($name) && !empty($phone) && !empty($types)) { //формируем сообщение и отправляем $mes = "Имя: " .$name . "\nТелефон: ".$phone; if (!empty($email)) $mes .= "\nEmail: ".$email; $mail = new SimpleMail(); $mail->setTo('mail@domen.ru', 'Your Email') ->setSubject($types) ->setFrom('admin@domen.ru', 'domen.ru') ->setMessage($mes) ->setWrap(100); $send = $mail->send(); if ($send) { $res = array( 'res'=>'ok' ); echo json_encode($res); }else{ $res = array( 'res'=>false, 'msg'=>'Error!' ); echo json_encode($res); } }else{ //поля не заполнены $res = array( 'res'=>false, 'msg'=>'Заполните все поля.' ); echo json_encode($res); } } else { $res = array( 'res'=>false, 'msg'=>'Заполните все поля.' ); }
Весь пример целиком(кроме ajax.php)
7661