practical 5 - Angular js registration form

PHOTO EMBED

Thu Jan 22 2026 10:28:49 GMT+0000 (Coordinated Universal Time)

Saved by @tanuja123 

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>AngularJS Form Validation</title>

  <!-- AngularJS CDN -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

  <style>
    body {
      font-family: Arial;
      margin: 40px;
    }
    input.ng-invalid.ng-touched, select.ng-invalid.ng-touched {
      border: 2px solid red;
    }
    input.ng-valid.ng-touched, select.ng-valid.ng-touched {
      border: 2px solid green;
    }
    .error {
      color: red;
      font-size: 14px;
    }
  </style>
</head>

<body ng-controller="FormController">

  <h2>Registration Form</h2>

  <form name="regForm" novalidate>

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

    <!-- Email -->
    <label>Email:</label><br>
    <input type="email" name="email" ng-model="user.email" required>
    <div class="error" ng-show="regForm.email.$touched && regForm.email.$invalid">
      Enter a valid email address
    </div>
    <br><br>

    <!-- Password -->
    <label>Password:</label><br>
    <input type="password" name="password" ng-model="user.password" required ng-minlength="6">
    <div class="error" ng-show="regForm.password.$touched && regForm.password.$invalid">
      Password must be at least 6 characters
    </div>
    <br><br>

    <!-- Age -->
    <label>Age:</label><br>
    <input type="number" name="age" ng-model="user.age" min="18" max="60" required>
    <div class="error" ng-show="regForm.age.$touched && regForm.age.$invalid">
      Age must be between 18 and 60
    </div>
    <br><br>

    <!-- Gender -->
    <label>Gender:</label><br>
    <input type="radio" ng-model="user.gender" value="Male" required> Male
    <input type="radio" ng-model="user.gender" value="Female"> Female
    <br><br>

    <!-- Country -->
    <label>Country:</label><br>
    <select name="country" ng-model="user.country" required>
      <option value="">--Select--</option>
      <option>India</option>
      <option>USA</option>
      <option>UK</option>
    </select>
    <div class="error" ng-show="regForm.country.$touched && regForm.country.$invalid">
      Please select a country
    </div>
    <br><br>

    <!-- Terms -->
    <label>
      <input type="checkbox" ng-model="user.terms" required> I accept terms and conditions
    </label>
    <br><br>

    <!-- Submit -->
    <button type="submit" ng-disabled="regForm.$invalid">
      Submit
    </button>

  </form>

  <br>

  <!-- Display form data -->
  <h3>Entered Data:</h3>
  <pre>{{ user | json }}</pre>

</body>

<script>
  var app = angular.module("myApp", []);

  app.controller("FormController", function ($scope) {
    $scope.user = {};
  });
</script>

</html>
content_copyCOPY

without installing node and angular cli