Scribd
Upload
57 views3 pages

AngularJS Login Form Lab Program

This document contains instructions for a lab program assignment in AngularJS. Students are asked to (1) develop an AngularJS login form with validation for username and password fields, (2) the form must validate that the username is between 5-8 characters and password is between 5-8 characters, and (3) display error messages if validation fails or the login attempt fails 3 times. The document provides an example code implementation of the login form with the required validation and error handling.

Uploaded by

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

AngularJS Login Form Lab Program

This document contains instructions for a lab program assignment in AngularJS. Students are asked to (1) develop an AngularJS login form with validation for username and password fields, (2) the form must validate that the username is between 5-8 characters and password is between 5-8 characters, and (3) display error messages if validation fails or the login attempt fails 3 times. The document provides an example code implementation of the login form with the required validation and error handling.

Uploaded by

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

BANGALORE INSTITUTE OF TECHNOLOGY

K. R. Road, V. V. Pura, Bengaluru-560004

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

Angular JS Laboratory
Course Code: 21CSL581 I.A. Marks : 50
Hours/Week: 2P Exam Hours: 03
Total Hours: 24 Exam Marks: 50
Week 8 Programs
1. LAB PROGRAM 8
Develop AngularJS program to create a login form, with validation for the username and
password fields.

<!DOCTYPE html>
<html>
<head>
<title>LAB8 PROGRAM</title>
<script type="text/javascript" src="https:\\[Link]\ajax\libs\angularjs\1.8.2\
[Link]">
</script>
<script>
var app=[Link]("myApp",[]);
[Link]("myCntrl",function($scope)
{
$[Link]=''
$[Link]=''
$[Link]=0
$[Link]=function()
{
//[Link]("Inside login function")
if($[Link]=="thanuja" && $[Link]=="12345678")
{
alert("Login Successful")
}
else{
$[Link]++
if($[Link]<=3)
{
alert("Incorrect username/password! Attempt No. "+$[Link])
}
else
{
[Link]("loginbutton").disabled=true
}
}
}
});
</script>
<style>
.error-message{color:red; font-size:20px}
</style>
</head>
<body ng-app="myApp">
<h1>ANGULARJS LOGIN FORM</h1>
<form name="loginform" ng-submit="submitform()">
<div ng-controller="myCntrl">
Enter User Name:<input type="text" name="username" ng-model="username" ng-
minlength="5" ng-maxlength="8" required>
<span class="error-message" ng-show="[Link].$[Link] &&
[Link].$dirty">User Name is Required</span>
<span class="error-message" ng-show="[Link].
$[Link]">Minimum Length Must be 5</span>
<span class="error-message" ng-show="[Link].
$[Link]">Maximum Username Length is Limited to 8</span><br/><br/>
Enter Password:<input type="password" name="password" ng-model="password" ng-
minlength="5" ng-maxlength="8" required>
<span class="error-message" ng-show="[Link].$[Link] &&
[Link].$dirty">Password is Required</span>
<span class="error-message" ng-show="[Link].$[Link]">
Minimum Password Length Must be 5</span>
<span class="error-message" ng-show="[Link].$[Link]">
Maximum Password Length is Limited to 8</span><br/><br/>
<button type="submit" ng-disabled="loginform.$invalid" ng-click="login()"
id="loginbutton">Login</button>
</div>
</form>
</body>
</html>

Faculty In-charges

Course Coordinator Module Coordinator IQAC Programme Coordinator

You might also like