Scribd
Upload
22 views9 pages

59 AngularJS Form Validation NgRoute Routing Single Page Application Template Templarurl Service 03-03-2023

The document contains code for an AngularJS form with various input fields like name, email, phone number etc. along with validation checks. On submit, it checks if all fields are filled and matches the required formats. If any validation fails, it displays the relevant error alert.

Uploaded by

fokac40868
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
22 views9 pages

59 AngularJS Form Validation NgRoute Routing Single Page Application Template Templarurl Service 03-03-2023

The document contains code for an AngularJS form with various input fields like name, email, phone number etc. along with validation checks. On submit, it checks if all fields are filled and matches the required formats. If any validation fails, it displays the relevant error alert.

Uploaded by

fokac40868
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

<!

DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
<body ng-app="">

<p>Try writing in the input field:</p>


<form name="myForm">
MyInput:<input name="myInput" ng-model="myInput" required><br>
Email:<input type="email" name="myemail" ng-model="myemail" required>
</form>

<p>The input's MyInput valid state is:</p>


<h1>{{myForm.myInput.$untouched}}</h1>
<p>The input's Email valid state is:</p>
<h1>{{myForm.myemail.$valid}}</h1>

</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
<body>

<h2>Validation Example</h2>

<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>

<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span>
</p>

<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>

<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid || myForm.email.$dirty &&
myForm.email.$invalid">
</p>

</form>

<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
//$scope.email = '[email protected]';
});
</script>

</body>
</html>
<html>
<head>
<title>Angular JS Forms</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"
></script>

<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>

</head>
<body>

<h2>AngularJS Sample Application</h2>


<div ng-app = "mainApp" ng-controller = "studentController">

<form name = "studentForm" novalidate>


<table border = "0">
<tr>
<td>Enter first name:</td>
<td><input name = "firstname" type = "text" ng-model = "firstName" required>
<span style = "color:red" ng-show = "studentForm.firstname.$dirty &&
studentForm.firstname.$invalid">
<span ng-show = "studentForm.firstname.$error.required">First Name
is required.</span>
</span>
</td>
</tr>

<tr>
<td>Enter last name: </td>
<td><input name = "lastname" type = "text" ng-model = "lastName" required>
<span style = "color:red" ng-show = "studentForm.lastname.$dirty &&
studentForm.lastname.$invalid">
<span ng-show = "studentForm.lastname.$error.required">Last Name is
required.</span>
</span>
</td>
</tr>

<tr>
<td>Email: </td><td><input name = "email" type = "email" ng-model = "email"
length = "100" required>
<span style = "color:red" ng-show = "studentForm.email.$dirty &&
studentForm.email.$invalid">
<span ng-show = "studentForm.email.$error.required">Email is
required.</span>
<span ng-show = "studentForm.email.$error.email">Invalid email
address.</span>
</span>
</td>
</tr>

<tr>
<td>
<button ng-click = "reset()">Reset</button>
</td>
<td>
<button ng-disabled = "studentForm.firstname.$dirty &&
studentForm.firstname.$invalid || studentForm.lastname.$dirty &&
studentForm.lastname.$invalid || studentForm.email.$dirty &&
studentForm.email.$invalid" ng-click="submit()">Submit</button>
</td>
</tr>

</table>
</form>
</div>

<script>
var mainApp = angular.module("mainApp", []);

mainApp.controller('studentController', function($scope) {
$scope.reset = function() {
$scope.firstName = "Mahesh";
$scope.lastName = "Parashar";
$scope.email = "[email protected]";
}

$scope.reset();
});
</script>

</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
<body ng-app="">

<p>Try leaving the first input field blank:</p>

<form name="myForm">
<p>Name:
<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is required.</span>
</p>

<p>Address:
<input name="myAddress" ng-model="myAddress" required>
</p>

</form>

<p>We use the ng-show directive to only show the error message if the field has been touched
AND is empty.</p>

</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
<style>
form.ng-pristine {
background-color:lightblue;
}
form.ng-dirty {
background-color:pink;
}
</style>
<body ng-app="">

<form name="myForm">
<p>Try writing in the input field:</p>

<input name="myName" ng-model="myName" required>

<p>The form gets a "ng-dirty" class when the form has been modified, and will therefore turn
pink.</p>
</form>

</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
<style>
input.ng-invalid {
background-color:pink;
}
input.ng-valid {
background-color:lightgreen;
}
</style>
<body ng-app="">

<p>Try writing in the input field:</p>

<form name="myForm">
<input name="myName" ng-model="myName" required>
</form>

<p>The input field requires content, and will therefore become green when you write in it.</p>

</body>
</html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webtech</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"
></script>
</head>

<body>
<div ng-app="myApp" ng-controller="myctrl">
<table>
<form name="myForm">
<tr>
<td><label>Name</label></td>
<td><input type="text" name="name" ng-model="name"></td>
</tr>
<tr>
<td><label>Email</label></td>
<td><input type="text" name="email" ng-model="email"></td>
</tr>
<tr>
<td><label>Phone Number</label></td>
<td><input type="text" name="phnumber" ng-model="phnumber"></td>
</tr>
<tr>
<td><label>budget</label></td>
<td><input type="text" name="budget" ng-model="budget"></td>
</tr>
<tr>
<td><label>What is this about</label></td>
<td><textarea name="about" ng-model="about"></textarea></td>
</tr>
<tr>
<td><label>SEO</label></td>
<td><input type="text" name="seo" ng-model="seo"></td>
</tr>
<tr>
<td><label>Hosting</label></td>
<td>
<input type="radio" name="hosting" value="Yes" ng-model="hosting">
<label>Yes</label>
</td>
<td>
<input type="radio" name="hosting" value="No" ng-model="hosting">
<label>No</label>
</td>
</tr>
<tr>
<td><button type="submit" ng-click="checkValidationOnClick()">Submit</button></td>
</tr>
</form>
</table>

<script>
var app = angular.module("myApp", []);
app.controller("myctrl", function ($scope) {
$scope.name = "";
$scope.email = "";
$scope.phnumber = 0;
$scope.budget = 0;
$scope.about = "";
$scope.seo = "";
$scope.hosting = "";
$scope.checkValidationOnClick = function () {
var flag = 0;
if ($scope.name == "" || $scope.email == "" || $scope.phnumber == "" || $
scope.budget ==
"" || $scope.about == "" || $scope.seo == "" || $scope.hosting == "")
{
alert("All fields are mandatory and have to be entered");
return false;
flag = 1;
}
var letters = /^[a-zA-Z _ ]*$/;
if (!$scope.name.match(letters)) {
alert("Name fields should contain only alphabets");
return false;
flag = 1;
}

var check = /^([a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6})*$/;


if (!$scope.email.match(check)) {
alert("Enter valid email id");
return false;
flag = 1;
}
var numbers = /^[0-9]*$/;
if (!$scope.phnumber.match(numbers)) {
alert("ENter only numbers in phone number field");
return false;
flag = 1;
}
var decimalCheck = /^\d+(\.\d{1,2})?$/;
if (!$scope.budget.match(decimalCheck)) {
alert("Budget should have a maximum of 2 decimal fields");
return false;
flag = 1;
}

}
})
</script>
</body>

</html>

You might also like