Skip to content
  • Github
  • Facebook
  • twitter
  • About Us
  • Contact Us
  • Privacy Policy
  • Terms & Conditions
  • Site Map

XpertPhp

Expertphp Is The Best Tutorial For Beginners

  • Home
  • Javascript
    • Jquery
    • React JS
    • Angularjs
    • Angular
    • Nodejs
  • Codeigniter
  • Laravel
  • Contact Us
  • About Us
  • Live Demos

Home » Angularjs » AngularJS Form Validation Example

AngularJS Form Validation Example

AngularJS Form Validation Example

Posted on June 1, 2019December 17, 2022 By XpertPhp No Comments on AngularJS Form Validation Example

Today, We will start to learn with angularjs. So first We will discuss form validation with angularjs(AngularJS Form Validation Example). We create the form using bootstrap and that form we will make angular form validation.

We will take form fields like as first name, last name, email, mobile and address. We will create form validation using the rules such as required, email, minlength, and maxlength. basically AngularJS provides its additional properties $dirty, $valid, $invalid, and $pristine. So we will check the form validation using the additional properties.

Let’s look at a below example.

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>
<head>
  <title>AngularJS Form Validation Example - XpertPhp</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style>
input.ng-invalid, textarea.ng-invalid
{
border-color:red;
}
</style>
</head>
<body>
<div class="container">
<h2>AngularJS Form Validation Example</h2>
<form method="post" name="myForm" ng-app="myApp" ng-controller="validateCtrl" novalidate>
  <div class="form-group">
    <label for="txtFname">First Name*</label>
    <input type="text" class="form-control" name="txtFname" id="txtFname" ng-model="txtFname" required>
<span style="color:red" ng-show="myForm.txtFname.$dirty && myForm.txtFname.$invalid">
<span ng-show="myForm.txtFname.$error.required">FirstName is required.</span>
</span>
  </div>
  <div class="form-group">
    <label for="txtLname">Last Name*</label>
    <input type="text" class="form-control" name="txtLname" id="txtLname" ng-model="txtLname" required>
<span style="color:red" ng-show="myForm.txtLname.$dirty && myForm.txtLname.$invalid">
<span ng-show="myForm.txtLname.$error.required">LastName is required.</span>
</span>
  </div>
   <div class="form-group">
    <label for="txtEmail">Email*</label>
    <input type="email" class="form-control" name="txtEmail" id="txtEmail" ng-model="txtEmail" required>
<span style="color:red" ng-show="myForm.txtEmail.$dirty && myForm.txtEmail.$invalid">
<span ng-show="myForm.txtEmail.$error.required">Email is required.</span>
<span ng-show="myForm.txtEmail.$error.email">Invalid email address.</span>
</span>
  </div>
  <div class="form-group">
    <label for="txtMobile">Mobile*</label>
    <input type="text" class="form-control" name="txtMobile" ng-minlength="10" id="txtMobile" ng-model="txtMobile" required>
<span style="color:red" ng-show="myForm.txtMobile.$dirty && myForm.txtMobile.$invalid">
<span ng-show="myForm.txtMobile.$error.required">Mobile is required.</span>
<span ng-show="myForm.txtMobile.$error.minlength">required 10 digits.</span>
</span>
  </div>
  <div class="form-group">
    <label for="txtAddress">Address*</label>
    <textarea name="txtAddress" class="form-control" id="txtAddress" ng-model="txtAddress" required></textarea>
<span style="color:red" ng-show="myForm.txtAddress.$dirty && myForm.txtAddress.$invalid">
<span ng-show="myForm.txtAddress.$error.required">Address is required.</span>
</span>
  </div>
  <input type="submit" class="btn btn-success" ng-disabled="myForm.$invalid">
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
});
</script>
</body>
</html>
See also  confirm password validation example in html5

 

Show Demo

Angularjs Tags:angular best course, angular udemy course, AngularJS Form Validation, best angular course on udemy, form validation, udemy angularjs course, validation

Post navigation

Previous Post: Star Rating System Using PHP and Jquery with ajax
Next Post: Laravel 5.8 CRUD operation with ajax example

Latest Posts

  • Laravel 12 Ajax CRUD Example
  • Laravel 12 CRUD Example Tutorial
  • How to Create Dummy Data in Laravel 11
  • Laravel 11 Yajra Datatables Example
  • Laravel 11 Ajax CRUD Example
  • Laravel 11 CRUD Example Tutorial
  • Laravel 10 Ajax CRUD Example Tutorial
  • Laravel 10 CRUD Example Tutorial
  • How to disable button in React js
  • JavaScript Interview Questions and Answers

Tools

  • Compound Interest Calculator
  • Hex to RGB Color Converter
  • Pinterest Video Downloader
  • Birthday Calculator
  • Convert JSON to PHP Array Online
  • JavaScript Minifier
  • CSS Beautifier
  • CSS Minifier
  • JSON Beautifier
  • JSON Minifier

Categories

  • Ajax
  • Angular
  • Angularjs
  • Bootstrap
  • Codeigniter
  • Css
  • Htaccess
  • Interview
  • Javascript
  • Jquery
  • Laravel
  • MongoDB
  • MySql
  • Nodejs
  • Php
  • React JS
  • Shopify Api
  • Ubuntu

Tags

angular 10 tutorial angular 11 ci tutorial codeigniter 4 image upload Codeigniter 4 Tutorial codeigniter tutorial CodeIgniter tutorial for beginners codeigniter with mysql crud operation eloquent relationships file upload File Validation form validation Image Upload jQuery Ajax Form Handling jquery tutorial laravel 6 Laravel 6 Eloquent Laravel 6 Model laravel 6 relationship laravel 6 relationship eloquent Laravel 6 Routing laravel 7 Laravel 7 Eloquent laravel 7 routing laravel 7 tutorial Laravel 8 laravel 8 example laravel 8 tutorial laravel 9 example laravel 9 tutorial Laravel Framework laravel from scratch laravel social login learn jquery nodejs pagination payment gateway php with mysql react js example react js tutorial send mail validation wysiwyg editor wysiwyg html editor

Copyright © 2018 - 2025,

All Rights Reserved Powered by XpertPhp.com