<html ng-app="validationApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="ValidationController">
<h1>User Details</h1>
<form name="userForm" novalidate>
<label for="name">Name:</label>
<input type="text" id="name" name="name" ng-model="user.name" required ng-pattern="/^[a-zA-Z ]+$/">
<div ng-show="userForm.name.$error.pattern">Name should contain only characters.</div>
<label for="mobile">Mobile Number:</label>
<input type="tel" id="mobile" name="mobile" ng-model="user.mobile" required ng-pattern="/^\d{10}$/">
<div ng-show="userForm.mobile.$error.pattern">Mobile no. should contain exactly 10 digits.</div>
<label for="pincode">Pin Code:</label>
<input type="text" id="pincode" name="pincode" ng-model="user.pincode" required ng-pattern="/^\d{6}$/">
<div ng-show="userForm.pincode.$error.pattern">Pin code should contain exactly 6 digits.</div>
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" ng-model="user.email" required>
<div ng-show="userForm.email.$error.email">Invalid email address.</div>
<div ng-show="userForm.email.$error.required">Email address is required.</div>
<button type="submit" ng-disabled="userForm.$invalid">Submit</button>
</form>
<script>
var app = angular.module('validationApp', []);
app.controller('ValidationController', function ($scope) {
$scope.user = {};
});
</script>
</body>
</html>
No comments:
Post a Comment