Валидация формы на AngularJS и отправка на Ajax

Очень простой способ валидации формы на AngularJS, который создается и настраивается за пару минут. Что будем делать:

  1. Создадим форму заявки обратного звонка
  2. Не правильно заполненные поля будет подсвечиваться в режиме реального времене
  3. Проверим форму на валидность
  4. Отправим все данный на сервер(ajax.php)
  5. Проверим данные, отправим сообщение если все ок, иначе вернем ошибку

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

  • а можно пример с валидацией времени и нецелого числа