Slip 23 - D) Using AngularJS create a SPA to carry out validation for a username entered in textbox. If the textbox is blank, alert ‘Enter username’. If the number of characters is less than three, alert ’ Username is too short’. If value entered is appropriate the print ‘Valid username’ and password should be minimum 8 characters.

Solution:

<html>
<head>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body ng-app>
     <form name="studentForm" novalidate >
        User Name: <input type="text" name="uname" ng-model="uname" ng-minlength="3" ng-required="true"> 
        <span ng-show="studentForm.uname.$touched && studentForm.uname.$error.required" style="color:red">
Username is required.</span>
        <span ng-show="studentForm.uname.$error.minlength"style="color:red">
Username is too short.</span>
        <span ng-show="studentForm.uname.$valid" style="color:green">
Valid Username.</span><br><br>
Password: <input type="text" name="pass" ng-model="pass" ng-minlength="8" ng-required="true"> 
        <span ng-show="studentForm.pass.$touched && studentForm.pass.$error.required" style="color:red">
Password is required.</span>
        <span ng-show="studentForm.pass.$error.minlength"style="color:red">
Password is too short.</span><br><br>
        <input type="submit" value="Login">
    </form>
</body>
</html>

Post a Comment

0 Comments