Scribd
Upload
47 views3 pages

21CSL581 AJS Week 8 Programs

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
47 views3 pages

21CSL581 AJS Week 8 Programs

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
You are on page 1/ 3

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:\\ajax.googleapis.com\ajax\libs\angularjs\1.8.2\
angular.min.js">
</script>
<script>
var app=angular.module("myApp",[]);
app.controller("myCntrl",function($scope)
{
$scope.username=''
$scope.password=''
$scope.noattempts=0
$scope.login=function()
{
//console.log("Inside login function")
if($scope.username=="thanuja" && $scope.password=="12345678")
{
alert("Login Successful")
}
else{
$scope.noattempts++
if($scope.noattempts<=3)
{
alert("Incorrect username/password! Attempt No. "+$scope.noattempts)
}
else
{
document.getElementById("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="loginform.username.$error.required &&
loginform.username.$dirty">User Name is Required</span>
<span class="error-message" ng-show="loginform.username.
$error.minlength">Minimum Length Must be 5</span>
<span class="error-message" ng-show="loginform.username.
$error.maxlength">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="loginform.password.$error.required &&
loginform.password.$dirty">Password is Required</span>
<span class="error-message" ng-show="loginform.password.$error.minlength">
Minimum Password Length Must be 5</span>
<span class="error-message" ng-show="loginform.password.$error.maxlength">
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

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy