Form Validation using Angular JS

Form Validation using Angular JS

Angular JS which accepts and validate student Name , Email and Mobile from the user

Form Validation using Angular JS
<!DOCTYPE html>
<html lang="en" ng-app="studentApp">
<head>
    <meta charset="UTF-8">
    <title>Student Form</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body ng-controller="StudentController">

<div class="container">
    <h2>Student Form</h2>
    <form name="studentForm" ng-submit="submitForm(studentForm.$valid)" novalidate>

        <!-- Name -->
        <div class="form-group" ng-class="{'has-error': studentForm.name.$touched && studentForm.name.$invalid}">
            <label for="name">Name:</label>
            <input type="text" class="form-control" id="name" name="name" ng-model="student.name" required>
            <span class="help-block" ng-show="studentForm.name.$touched && studentForm.name.$error.required">Name is required.</span>
        </div>

        <!-- Email -->
        <div class="form-group" ng-class="{'has-error': studentForm.email.$touched && studentForm.email.$invalid}">
            <label for="email">Email:</label>
            <input type="email" class="form-control" id="email" name="email" ng-model="student.email" required>
            <span class="help-block" ng-show="studentForm.email.$touched && studentForm.email.$error.required">Email is required.</span>
            <span class="help-block" ng-show="studentForm.email.$touched && studentForm.email.$error.email">Invalid email address.</span>
        </div>

        <!-- Mobile Number -->
        <div class="form-group" ng-class="{'has-error': studentForm.mobile.$touched && studentForm.mobile.$invalid}">
            <label for="mobile">Mobile No:</label>
            <input type="text" class="form-control" id="mobile" name="mobile" ng-model="student.mobile" ng-pattern="/^\d{10}$/" required>
            <span class="help-block" ng-show="studentForm.mobile.$touched && studentForm.mobile.$error.required">Mobile number is required.</span>
            <span class="help-block" ng-show="studentForm.mobile.$touched && studentForm.mobile.$error.pattern">Mobile number must be 10 digits.</span>
        </div>

        <!-- Submit Button -->
        <button type="submit" class="btn btn-primary" ng-disabled="studentForm.$invalid">Submit</button>

    </form>
</div>

<!-- Include AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>
    var app = angular.module('studentApp', []);

    app.controller('StudentController', function($scope) {
        $scope.student = {};

        $scope.submitForm = function(isValid) {
            if (isValid) {
                alert('Form Submitted Successfully!');
                console.log($scope.student);
            } else {
                alert('Please fill out the form correctly.');
            }
        };
    });
</script>

</body>
</html>

Categories

Recent Posts

Tags