Use Form Validation Using AngularJS and PHP

  • Brijpal Sharma

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

    php angularjs angular


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 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>
	<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. 
	</div>
 
	<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>
	<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>
	</div>
	<br />
	<div class="form-group">
		<input type="submit" name="post" class="btn btn-primary" 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.


About Author
  • user profile
    Brijpal Sharma

    brijpalsharma99@gmail.com, January 29th, 2018

    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 Comment

You must be logged in to post a comment.