Preventing form submission when invalid

What You’ll Learn

How to prevent form submission when inputs are invalid
Using AngularJS form validation ($invalid, $dirty, $touched)
Disabling the submit button dynamically
Best practices for a better user experience

---

1️⃣ Preventing Invalid Form Submission

AngularJS provides a built-in way to disable form submission using the $invalid property.

How does $invalid work?

• A form is $invalid if any of its fields have validation errors.
• A form is $valid when all required fields contain valid data.
• The ng-submit directive prevents submission if the button is disabled.

---

2️⃣ Example: Preventing Submission When Form is Invalid

Let’s create a simple AngularJS form with validation for name, email, and phone number.

HTML Form with Validation

<div ng-app="myApp" ng-controller="FormController">
    <form name="userForm" ng-submit="submitForm()" novalidate>

        <!-- Name Field -->
        <label>Name:</label>
        <input type="text" name="name" ng-model="user.name" required />
        <span class="error" ng-show="userForm.name.$touched && userForm.name.$error.required">
            Name is required.
        </span>

        <!-- Email Field -->
        <label>Email:</label>
        <input type="email" name="email" ng-model="user.email" required />
        <span class="error" ng-show="userForm.email.$touched && userForm.email.$error.required">
            Email is required.
        </span>
        <span class="error" ng-show="userForm.email.$dirty && userForm.email.$error.email">
            Enter a valid email address.
        </span>

        <!-- Phone Field -->
        <label>Phone:</label>
        <input type="text" name="phone" ng-model="user.phone" ng-pattern="/^\d{10}$/" required />
        <span class="error" ng-show="userForm.phone.$touched && userForm.phone.$error.required">
            Phone number is required.
        </span>
        <span class="error" ng-show="userForm.phone.$dirty && userForm.phone.$error.pattern">
            Enter a valid 10-digit phone number.
        </span>

        <br />

        <!-- Disable Submit Button If Form is Invalid -->
        <button type="submit" ng-disabled="userForm.$invalid">Submit</button>
    </form>
</div>

AngularJS Controller (JavaScript)

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

app.controller("FormController", function ($scope) {
    $scope.user = {}; // Empty user object

    $scope.submitForm = function () {
        if ($scope.userForm.$valid) {
            alert("Form submitted successfully!");
        }
    };
});

CSS for Styling the Errors

.error {
    color: red;
    font-size: 12px;
}

---

3️⃣ How It Works

The submit button is disabled when the form is invalid using:

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

ng-submit="submitForm()" ensures the form is submitted only if it is valid.
The submitForm() function checks $valid before submission.

---

4️⃣ Alternative: Prevent Submission in JavaScript

Instead of disabling the submit button, you can prevent submission inside the function:

$scope.submitForm = function () {
    if ($scope.userForm.$invalid) {
        alert("Please fix the errors before submitting.");
        return;
    }
    alert("Form submitted successfully!");
};

Why use this?
Useful when validating on the backend before submission.
Allows custom validation logic before sending data.