-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathExperiment09.html
124 lines (97 loc) · 7.21 KB
/
Experiment09.html
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Experiment 9</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<script src="Experiment09.js"></script>
</head>
<body class="bg-dark text-light" ng-app="myapp" ng-controller="myctrl">
<h1 class="text-center p-5 text-light">Form Validation and Routing using Angular JS</h1>
<hr class="border border-light border-2 opacity-50">
<section id="Q1" >
<h3 class="text-center text-white bg mt-5">1. Registration Page</h3>
<div class="container col-sm-5 mt-5">
<form name="regForm">
<label for="t1" class="form-label text-white">Name <span class="text-danger">*</span></label>
<input type="text" name="name" ng-model="name" id="t1" class="form-control" required>
<span class="text-danger" ng-show="regForm.name.$invalid && regForm.name.$dirty">Name Required</span>
<span class="text-danger">{{checkName()}}</span>
<span class="text-danger">{{nm_error}}</span>
<br>
<label for="t2" class="form-label text-white">Password<span class="text-danger">*</span></label>
<input type="password" id="t2" class="form-control" name="psd" ng-model="psd" required>
<span class="text-danger" ng-show="regForm.psd.$invalid && regForm.psd.$dirty">Password Required</span>
<span class="text-danger">{{checkPass()}}</span>
<span class="text-danger" ng-show="regForm.psd.$valid">{{ps_error}}</span>
<br>
<label for="t3" class="form-label text-white">Age <span class="text-danger">*</span></label>
<input type="text" id="t3" class="form-control" ng-model="age" name="age" required>
<span class="text-danger" ng-show="regForm.age.$invalid && regForm.age.$dirty">Age Required</span>
<span class="text-danger">{{checkAge()}}</span>
<span class="text-danger" ng-show="regForm.age.$valid" >{{age_error}}</span>
<br>
<label for="t4" class="form-label text-white">Mobile No. <span class="text-danger">*</span></label>
<input type="tel" id="t4" class="form-control" ng-model="ph" name="ph" required>
<span class="text-danger" ng-show="regForm.ph.$invalid && regForm.ph.$dirty">Phone No. Required</span>
<span class="text-danger">{{checkMob()}}</span>
<span class="text-danger" ng-show="regForm.ph.$valid">{{mob_error}}</span>
<br>
<label for="t5" class="form-label text-white">E-Mail <span class="text-danger">*</span></label>
<input type="email" id="t5" class="form-control" ng-model="em" name="em" required>
<span class="text-danger" ng-show="regForm.em.$dirty && regForm.em.$error.required">Email Required</span>
<span class="text-danger" ng-show="regForm.em.$dirty && regForm.em.$error.email">Invalid Email</span><br>
<label for="male" class="form-label text-white">Gender <span class="text-danger">*</span></label>
<div>
<center>
<input class="form-check-input" type="radio" name="gender" ng-model="gender" value="male" id="male">
<label class="form-check-label" for="male">
Male
</label>
<input class="form-check-input ms-5" type="radio" name="gender" ng-model="gender" value="fmale" id="fmale">
<label class="form-check-label" for="fmale">
Female
</label>
<span class="text-danger">{{checkGender()}}</span>
<span class="text-danger ps-4">{{gen_error}}</span>
</center>
</div> <br>
<label for="state" class="form-label text-white">State <span class="text-danger">*</span></label>
<select class="form-select" id="state" aria-label="Default select example" ng-model="state">
<option value="1">Assam</option>
<option value="2">Telangana</option>
<option value="3">Karnataka</option>
<option value="3">Tamil Nadu</option>
</select>
<span class="text-danger">{{checkState()}}</span>
<span class="text-danger">{{st_error}}</span>
</form>
<div class="text-center mb-4">
<button ng-disabled="nm_error!='' || regForm.name.$invalid || regForm.psd.$invalid || ps_error!='' || regForm.age.$invalid || age_error!='' || myform.ph.$invalid || mob_error!='' || myform.em.$invalid || gen_error!='' || st_error!='' " class="btn btn-outline-light mt-5">Submit</button>
</div>
</div>
<hr class="border border-light border-2 opacity-50">
</section>
<section id="Q2" ng-app="calc">
<h3 class="text-center text-white bg mt-5">2.Routing</h3>
<div class="container col-sm-8 mt-5">
<center>
<div class="text-center col-sm-6 mt-5">
<a class="text-success" href="#!page1">Page 1</a>
<a class="text-success" href="#!page2">Page 2</a>
<a class="text-success" href="#!page3">Page 3</a>
<a class="text-success" href="#!page4">Page 4</a>
</div>
</center>
<div ng-view class="mt-5">
</div>
</div>
<hr class="border border-light border-2 opacity-50">
</section>
</body>
</html>