Preventing form resubmission using novalidate

In AngularJS, preventing form resubmission is a common requirement, especially after a form has been submitted to avoid duplicate entries or actions. One way to prevent form resubmission is by using the novalidate attribute in combination with form control flags and submit button disabling.

Preventing Form Resubmission Using `novalidate`

The novalidate attribute can be used in the <form> tag to prevent the browser’s default form validation. This is particularly useful if you are using AngularJS form validation, and you want to disable the browser’s native validation messages or behaviors. However, novalidate alone does not prevent multiple form submissions, so we will also need additional logic to manage resubmission prevention.

Key Techniques to Prevent Form Resubmission

Using the novalidate Attribute: The novalidate attribute prevents the browser’s default validation, allowing AngularJS to manage validation and prevent issues with double submission.
Disabling the Submit Button After Submission: A common practice is to disable the submit button after the form has been submitted to prevent users from clicking the button multiple times.
Using $scope Flags for Submission State: A flag can be used to track the form submission state. Once the form is submitted, the flag is set to prevent further submissions.

Step-by-Step Implementation

Let’s implement a form that:

Uses novalidate to disable default browser validation.
Prevents the form from being resubmitted by disabling the submit button.
Displays a loading indicator while the form is submitting.

HTML (Form Template)

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="app.js"></script>
</head>
<body ng-controller="FormController">
    <form name="myForm" ng-submit="submitForm()" novalidate>
        <label for="username">Username:</label>
        <input type="text" name="username" ng-model="formData.username" ng-required="true" />
        <span ng-show="myForm.username.$error.required && myForm.username.$dirty">Username is required.</span>

        <br/><br/>

        <label for="email">Email:</label>
        <input type="email" name="email" ng-model="formData.email" ng-required="true" />
        <span ng-show="myForm.email.$error.required && myForm.email.$dirty">Email is required.</span>
        <span ng-show="myForm.email.$error.email && myForm.email.$dirty">Invalid email format.</span>

        <br/><br/>

        <button type="submit" ng-disabled="myForm.$invalid || isSubmitting">Submit</button>

        <!-- Loading indicator -->
        <div ng-show="isSubmitting">Submitting...</div>
    </form>
</body>
</html>

JavaScript (app.js)

angular.module('myApp', [])
  .controller('FormController', function($scope, $timeout) {
    $scope.formData = {};  // Holds form data
    $scope.isSubmitting = false;  // Flag to track if the form is being submitted

    // Function to handle form submission
    $scope.submitForm = function() {
      if ($scope.myForm.$valid && !$scope.isSubmitting) {
        // Disable the form to prevent resubmission
        $scope.isSubmitting = true;

        // Simulate a delay for form submission (e.g., an HTTP request)
        $timeout(function() {
          alert("Form submitted successfully!");
          $scope.isSubmitting = false;  // Re-enable the form
          $scope.myForm.$setPristine(); // Reset form to pristine state
          $scope.myForm.$setUntouched(); // Reset form to untouched state
          $scope.formData = {}; // Clear form data
        }, 2000);  // Simulate a 2-second submission delay
      } else {
        alert("Please fill out the form correctly.");
      }
    };
  });

How It Works

Form Structure:
- The form uses the novalidate attribute to disable native HTML5 form validation.
- It has ng-required on the input fields to trigger AngularJS validation.
Disabling the Submit Button:
- The ng-disabled="myForm.$invalid || isSubmitting" condition on the submit button disables the button if the form is invalid or if the form is in the process of being submitted (isSubmitting is true).
Tracking Form Submission:
- The isSubmitting flag is set to true when the form is submitted. This prevents multiple submissions by disabling the submit button.
- After a simulated submission (with a 2-second delay), the form is reset:
  - The form is set to its pristine state using $setPristine().
  - The form is set to its untouched state using $setUntouched().
  - The form data is cleared by resetting $scope.formData.
Loading Indicator:
- A loading indicator (<div ng-show="isSubmitting">Submitting...</div>) is shown while the form is being processed, providing visual feedback to the user that the form is submitting.

Key Concepts and Benefits

Disabling the Submit Button: By disabling the submit button after submission, we ensure that users cannot submit the form multiple times while it is processing.
novalidate Attribute: This disables the default HTML5 form validation, allowing AngularJS to handle the form validation instead. It also avoids conflicts between native and AngularJS validation.
Form Reset: After submission, the form is reset to its initial state using $setPristine() and $setUntouched(). This is important for clearing out validation states and for the form to be ready for the next use.
Preventing Multiple Submissions: The isSubmitting flag plays a key role in preventing multiple form submissions. Once the form starts submitting, the flag prevents further submissions until the current one is completed.

Preventing Form Resubmission Using novalidate