Practical No:- 5

PHOTO EMBED

Fri Jan 23 2026 05:06:59 GMT+0000 (Coordinated Universal Time)

Saved by @@ankita123 

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>AngularJS Form Validation</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <style>
        .error { color: red; }
        input.ng-invalid.ng-touched { border-color: red; }
        input.ng-valid.ng-touched { border-color: green; }
    </style>
</head>
<body ng-controller="FormCtrl">

<h2>Registration Form</h2>

<form name="userForm" ng-submit="submitForm()" novalidate>

    <!-- Name -->
    <label>Name:</label><br>
    <input type="text" name="name"
           ng-model="user.name"
           required
           ng-minlength="3">
    <div class="error" ng-show="userForm.name.$touched && userForm.name.$invalid">
        <span ng-show="userForm.name.$error.required">Name is required.</span>
        <span ng-show="userForm.name.$error.minlength">Minimum 3 characters.</span>
    </div>
    <br><br>

    <!-- Email -->
    <label>Email:</label><br>
    <input type="email" name="email"
           ng-model="user.email"
           required>
    <div class="error" ng-show="userForm.email.$touched && userForm.email.$invalid">
        <span ng-show="userForm.email.$error.required">Email is required.</span>
        <span ng-show="userForm.email.$error.email">Invalid email format.</span>
    </div>
    <br><br>

    <!-- Password -->
    <label>Password:</label><br>
    <input type="password" name="password"
           ng-model="user.password"
           ng-minlength="6"
           required>
    <div class="error" ng-show="userForm.password.$touched && userForm.password.$invalid">
        <span ng-show="userForm.password.$error.required">Password is required.</span>
        <span ng-show="userForm.password.$error.minlength">Minimum 6 cha
content_copyCOPY

creates a Registration Form