How to use AngularJS Built-in Validation In Angular

Approaches for Preventing form submission when input validation fails

Using Custom Controller-Based Validation

In this approach, we are using the AngularJS built-in validation utilities. Here, we are validating the Username, Email, and Mobile Number fields. We have used the inbuilt validation fields like, required, ng-minlength, ng-pattern, placeholder, etc to provide the validation to the fields.

Below is the detailed information on the inbuilt validations used:

Username Field
- required: This makes sure that the username field is required and must not be submitted empty
- ng-minlength=”3″: This defines a minimum length of 3 characters for the username field.
Email Field
- required: Make sure that the email field is required and must not be left empty.
- ng-pattern=”/^.+@.+\..+$/”: Uses a regular expression pattern to check if the entered email address has a valid format.
Mobile Number Field
- ng-pattern=”/^[0-9]{10}$/”: Uses a regular expression pattern to validate that the mobile number consists of exactly 10 digits.
- placeholder: Provides a placeholder to guide users on the expected format.

Example: Below is an example that showcases the preventing form submission when input validation fails in AngularJS using AngularJS Built-in Validation.

HTML

<!DOCTYPE html> 
<html ng-app="formApp"> 
  
<head> 
    <style> 
        body { 
            font-family: Arial, sans-serif; 
            background-color: #f0f0f0; 
            text-align: center; 
        } 
  
        .container { 
            background-color: #fff; 
            border-radius: 8px; 
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 
            width: 400px; 
            margin: 0 auto; 
            padding: 20px; 
        } 
  
        h1 { 
            color: green; 
        } 
  
        h3 { 
            color: rgb(0, 0, 0); 
        } 
  
        form { 
            margin-top: 20px; 
        } 
  
        .form-group { 
            margin: 10px 0; 
        } 
  
        label { 
            display: block; 
            text-align: left; 
            margin-bottom: 5px; 
            font-weight: bold; 
        } 
  
        input { 
            width: 90%; 
            padding: 10px; 
            border: 1px solid #ccc; 
            border-radius: 4px; 
            font-size: 16px; 
        } 
  
        input.ng-invalid { 
            border-color: #f00; 
        } 
  
        .error { 
            color: #f00; 
            font-size: 14px; 
            text-align: left; 
        } 
  
        button { 
            background-color: #3498db; 
            color: #fff; 
            border: none; 
            border-radius: 4px; 
            padding: 10px 20px; 
            font-size: 18px; 
            cursor: pointer; 
        } 
  
        button:disabled { 
            background-color: #ccc; 
            cursor: not-allowed; 
        } 
  
        button:hover { 
            background-color: #2e87d3; 
        } 
    </style> 
</head> 
  
<body ng-controller="formController"> 
    <div class="container"> 
        <h1>w3wiki</h1> 
        <h3> 
              Approach 1: Using AngularJS Built-in Validation 
          </h3> 
        <form name="myForm" 
              ng-submit="submitForm()" novalidate> 
            <div class="form-group"> 
                <label for="username">Username:</label> 
                <input type="text" 
                       id="username"
                       name="username"
                       ng-model="user.username" required  
                       ng-minlength="3"> 
                <span class="error"
                      ng-show="myForm.username.$dirty"> 
                    <span ng-show="myForm.username.$error.required"> 
                        Username is required.</span> 
                    <span ng-show="myForm.username.$error.minlength"> 
                        Username must be at least 3 characters long. 
                    </span> 
                </span> 
            </div> 
            <div class="form-group"> 
                <label for="email">Email:</label> 
                <input type="email"
                       id="email" 
                       name="email" 
                       ng-model="user.email" required  
                       ng-pattern="/^.+@.+\..+$/"> 
                <span class="error" ng-show="myForm.email.$dirty"> 
                    <span ng-show="myForm.email.$error.required"> 
                        Email is required. 
                    </span> 
                    <span ng-show="myForm.email.$error.pattern"> 
                        Invalid email address. 
                    </span> 
                </span> 
            </div> 
            <div class="form-group"> 
                <label for="mobile">Mobile Number:</label> 
                <input type="tel" 
                       id="mobile" 
                       name="mobile" 
                       ng-model="user.mobile" 
                       ng-pattern="/^[0-9]{10}$/"
                       placeholder="Enter 10-digit mobile number" required> 
                <span class="error" 
                      ng-show="myForm.mobile.$dirty"> 
                    <span ng-show="myForm.mobile.$error.required"> 
                        Mobile number is required. 
                    </span> 
                    <span ng-show="myForm.mobile.$error.pattern"> 
                        Please enter a valid 
                        10-digit mobile number. 
                    </span> 
                </span> 
            </div> 
            <button type="submit" 
                    ng-disabled="myForm.$invalid"> 
                  Submit 
              </button> 
        </form> 
        <div ng-show="submitted"> 
            <h2>Form submitted successfully!</h2> 
        </div> 
    </div> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"> 
    </script> 
    
    <script> 
        var app = angular.module('formApp', []); 
        app.controller('formController', function ($scope) { 
            $scope.user = {}; 
            $scope.submitted = false; 
            $scope.submitForm = function () { 
                if ($scope.myForm.$valid) { 
                    alert('Form submitted successfully!'); 
                    $scope.submitted = true; 
                } 
            }; 
        }); 
    </script> 
</body> 
  
</html>

Output:

How to prevent form submission when input validation fails in AngularJS ?

Validation of fields is an important process while developing a dynamic web application. In terms of security, validation is an important concept. We pass the data from the client side through input fields to the server. If any of the fields is not validated properly and the user sends any irrelevant data then there can be cause of different security attack. So before submitting any of the forms in AngularJS, the validation of the fields should be done. We can validate the fields by setting the regex expressions, character limits, and more validations.

In this article, we will see how we can prevent form submission when input validation fails in AngularJS.