Use Form Validation Using AngularJS and PHP

Generic placeholder image
Brijpal Sharma
php angularjs angular  

Date:-June 29th, 2019 , Posted On:- Web Development

Learn how to Use Form Validation Using AngularJS and PHP. when the user tries to submit blank form submit button will disable after filling some data in form show submit button.

Use Form Validation Using AngularJS and PHP

In this post, we are going to learn How Use Form Validation Using AngularJS and PHP. Nowadays web development and other many of technology used verification to submit a form data to the server script. Nowadays AngularJS is one famous programming of front-end technology it will manage by Google developer.

In this post, we will handle form data submission by using AngularJS and we will learn to make necessary field validation by using AngularJS form valid or PHP Script. we will also use the database to store data which is submitted by the form.

Step 1: Database and Connect Details

Here we going to create a database with some columns and then get the connection.

CREATE TABLE `ajax_post_form` (
  `post_id` int(11) NOT NULL,
  `post_title` varchar(250) NOT NULL,
  `post_desc` text NOT NULL,
  `status` int(11) NOT NULL,
   PRIMARY KEY (`post_id`)

the following code uses to connect with core PHP.

//db details
$db_host = 'localhost';
$db_user = 'root';
$db_pass = '';
$db_name = 'li_demo';
//connect and select db
$con = mysqli_connect($db_host, $db_user, $db_pass, $db_name);


Step 2: Create an HTML Form with AngularJS for validation.

In this step, we will create an HTML form with Angular Directives with ng-appng-controller, ng-model and ng-disabled for declaring Angular App handling area.

<div ng-app="li-app" ng-controller="PostFormController">
	<div class="alert icon-alert with-arrow alert-success" role="alert" ng-show="success">
		<i class="fa fa-fw fa-check-circle"></i>
		<strong> Success ! </strong> Data saved successfully. 
	<div class="alert icon-alert with-arrow alert-danger" role="alert" ng-show="error">
		<i class="fa fa-fw fa-times-circle"></i>
		<strong> Note !</strong> Data saving failed. 
	<form name="post_details" ng-submit="postNow()">
	<div class="form-group">
		<label class="required">Post Title </label>
		<input type="text" name="post_title" ng-model="postDetails.post_title" class="form-control" required />
		<span class="text-danger" ng-show="errorTitle">{{errorTitle}}</span>
	<div class="form-group">
		<label class="required">Post Description </label>
		<textarea name="post_description" ng-model="postDetails.post_description" class="form-control" rows="8" required></textarea>
		<span class="text-danger" ng-show="errorDescription">{{errorDescription}}</span>
	<br />
	<div class="form-group">
		<input type="submit" name="post" class="btn btn-primary" ng-disabled="post_details.$invalid" value="Post Now"/>


Step 3: Initialize AngularJS App

Before using angular we need to initialize Angular JS with controller and scope objects with postNow() function.

var app = angular.module("li-app", []);

and create a controller with the $.post() method to submit form data to the PHP script.

app.controller("PostFormController", function($scope, $http){
	$scope.postDetails = {};
	$scope.postNow = function(){
				$scope.errorTitle = data.error.post_title;
				$scope.errorDescription = data.error.post_description;
				$scope.success = false;
				$scope.error = true;
				$scope.postDetails = null;
				$scope.errorTitle = null;
				$scope.errorDescription = null;
				$scope.success = true;
				$scope.error = false;

Step 4: Define the PHP code to handle form data submitted by users

Here we use sample PHP script with HTML form data handling with validation and store into MySQL database table and response as JSON array data.

$form_data = json_decode(file_get_contents("php://input"));
$data = array();
$error = array();
$post_title = mysqli_real_escape_string($con, $form_data->post_title);
$post_description = mysqli_real_escape_string($con, $form_data->post_description);
if(!isset($post_title) || empty($post_title))
 $error["post_title"] = "Post Title is required";
if(!isset($post_description) || empty($post_description))
 $error["post_description"] = "Post Description required";
	$data["status"] = false;
	$data["error"] = $error;
	$query = "INSERT INTO li_ajax_post_load(post_title, post_desc) VALUES ('$post_title', '$post_description') ";
	if(mysqli_query($con, $query))
		$data["status"] = true;
		$data["message"] = "New post added successfully.";
echo json_encode($data);


So here we completed the tutorial on how to Use Form Validation Using AngularJS and PHP.

About the author

user profile
Brijpal Sharma

Hello, My Name is Brijpal Sharma. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of Codermen. I started this blog to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers...


You must be logged in to post a comment.