JavaScript - Simple Form Validation Using AngularJS

Submitted by razormist on Thursday, May 23, 2019 - 21:41.

In this tutorial we will create a Simple Form Validation Using AngularJS. This code will automatically validate any entered characters in the form when applied. The code itself use a angular directives that has a built-in function to validate a form field by the use of ng-show, just adding a specific parameter in the form in can maximize the validation proccess. This a user-friendly program feel free to modify and use it to your system. We will be using AngularJS as a framework which has additional custom HTML attributes embedded into it. It can interprets those attributes as directives to bind inputted parts of the page to a model that represent as a standard JavaScript variables.

Getting Started:

First you have to download Bootstrap, this is the link for the bootstrap that i used for the layout design https://getbootstrap.com/. And, this is the link for the AngularJS https://angularjs.org/.

Creating The Interface

This is where we will create a simple form for our application. To create the forms simply copy and write it into you text editor, then save it index.html.

<!DOCTYPE html>
<html lang="en" ng-app="myModule">
        <head>
                <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" />
                <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
        </head>
<body ng-controller="myController">
        <nav class="navbar navbar-default">
                <div class="container-fluid">
                        <a class="navbar-brand" href="https://www.sourcecodester.com">Sourcecodester</a>
                </div>
        </nav>
        <div class="col-md-3"></div>
        <div class="col-md-6 well">
                <h3 class="text-primary">JavaScript - Simple Form Validation Using AngularJS</h3>
                <hr style="border-top:1px dotted #ccc;" />
                <div class="col-md-2"></div>
                <div class="col-md-8">
                        <form name="signupfrm">
                                <div class="form-group">
                                        <label>Firstname</label>
                                        <input type="text" class="form-control" name="firstname" ng-model="member.firstname" required="required"/>
                                        <center><span class="text-success" ng-show="signupfrm.firstname.$error.required">Required Field</span></center>
                                </div>
                                <div class="form-group">
                                        <label>Lastname</label>
                                        <input type="text" class="form-control" name="lastname" ng-model="member.lastname" required="required"/>
                                                <center><span class="text-success" ng-show="signupfrm.lastname.$error.required">Required Field</span></center>
                                </div>
                                <div class="form-group">
                                        <label>Username</label>
                                        <input type="text" class="form-control" name="username" ng-model="member.username" required="required"/>
                                                <center><span class="text-success" ng-show="signupfrm.username.$error.required">Required Field</span></center>
                                </div>
                                <div class = "form-group">
                                        <label>Password</label>
                                        <input type="password" class="form-control" name="password" ng-model="member.password" ng-minlength="8"  required="required"/>
                                                <center><span class = "text-success" ng-show="signupfrm.password.$error.required">Required Field</span></center>
                                                <center><span class = "text-danger" ng-show="signupfrm.password.$error.minlength">Password Too Short</span></center>
                                </div>
                                <br />
                                <center><button class="btn btn-primary" ng-click="register();" ng-disabled="signupfrm.$invalid"><span class = "glyphicon glyphicon-save"></span> Register</button></center>
                        </form>
                </div>  
        </div>
<script src="js/angular.js"></script>
<script src="js/script.js"></script>
</body>
</html>

Creating the Main Function

This code contains the main function of the application. This code will automatically validate a form field when entered. To do this just copy and write these block of codes as shown below inside the text editor and save it as script.js.

var app = angular.module("myModule", [])
                                                            .controller("myController", function($scope){
                                                                        $scope.register = function(){
                                                                                alert("Successfully register");
                                                                                window.location="index.html";
                                                                        }
                                                                });

There you have it we successfully created a Simple Form Validation using AngularJS. I hope that this simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!!

Add new comment

57 views