Use Form Validation Using AngularJS and PHP

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`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

the following code uses to connect with core PHP.

<?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 role="alert" ng-show="success">
		<i ></i>
		<strong> Success ! </strong> Data saved successfully. 
	</div>
	<div role="alert" ng-show="error">
		<i ></i>
		<strong> Note !</strong> Data saving failed. 
	</div>
 
	<form name=post_details ng-submit="postNow()">
	<div >
		<label >Post Title </label>
		<input type=text name=post_title ng-model="postDetails.post_title" required />
		<span ng-show="errorTitle">{{errorTitle}}</span>
	</div>
	<div >
		<label >Post Description </label>
		<textarea name=post_description ng-model="postDetails.post_description" rows="8" required></textarea>
		<span ng-show="errorDescription">{{errorDescription}}</span>
	</div>
	<br />
	<div >
		<input type=submit name=post ng-disabled="post_details.$invalid" value="Post Now"/>
	</div>
	</form>
</div>

 

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(){
		$http({
			method:"POST",
			url:"insertPost.php",
			data:$scope.postDetails,
		}).success(function(data){
			if(!(data.status))
			{
				$scope.errorTitle = data.error.post_title;
				$scope.errorDescription = data.error.post_description;
				$scope.success = false;
				$scope.error = true;
			}
			else
			{
				$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.

 
<?php
require_once('./include/mysqli_connect.php');
 
$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";
}
 
if(!empty($error))
{
	$data["status"] = false;
	$data["error"] = $error;
}
else
{
	$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.


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...


0 Comments

You must be logged in to post a comment.