jQuery Form Events

Form events fire when a user interacts with HTML form elements — typing in a field, selecting a dropdown, clicking a checkbox, or submitting a form. jQuery form events help you validate data, show feedback, and control form behaviour in real time.

Common jQuery Form Events

Diagram: Form Event Flow

  User workflow for a login form:

  Click on username field  → focus() fires
  Types username           → input() fires on each keystroke
  Clicks on password field → blur() fires on username field
                           → focus() fires on password field
  Types password           → input() fires
  Clicks Submit button     → submit() fires on the <form>

submit() — Intercept Form Submission

The submit() event fires when the user submits a form. Use event.preventDefault() to stop the page from reloading and handle validation yourself.

$(document).ready(function() {
    $("#loginForm").submit(function(event) {
        event.preventDefault();   // stop page reload

        var username = $("#username").val();
        if (username === "") {
            $("#errorMsg").text("Username cannot be empty.");
        } else {
            $("#errorMsg").text("");
            alert("Login successful!");
        }
    });
});

focus() and blur() — Field Enter and Exit

Use focus() to add hints when a user enters a field, and blur() to validate when they leave.

$(document).ready(function() {
    $("#email").focus(function() {
        $(this).css("border-color", "#007bff");
        $("#emailHint").text("Enter your registered email address.");
    });

    $("#email").blur(function() {
        $(this).css("border-color", "");
        var val = $(this).val();
        if (val.indexOf("@") === -1) {
            $("#emailHint").text("Please enter a valid email.").css("color", "red");
        } else {
            $("#emailHint").text("Email looks good.").css("color", "green");
        }
    });
});

Diagram: focus() and blur() Sequence

  [Email Field]
       │
       │  User clicks field
       ▼
  focus() → border turns blue, hint appears
       │
       │  User types email and moves to next field
       ▼
  blur()  → validates email → shows green or red message

change() — Dropdown and Checkbox Changes

The change() event works well with dropdowns, checkboxes, and radio buttons. It fires after the value changes and the user moves away from the element.

$(document).ready(function() {
    // Dropdown change
    $("#country").change(function() {
        var selected = $(this).val();
        $("#countryDisplay").text("You selected: " + selected);
    });

    // Checkbox change
    $("#newsletter").change(function() {
        if ($(this).is(":checked")) {
            alert("You subscribed to the newsletter.");
        } else {
            alert("You unsubscribed from the newsletter.");
        }
    });
});

input() — Instant Value Tracking

Unlike change() which fires after leaving the field, input() fires immediately on every keystroke, paste, or deletion.

$(document).ready(function() {
    $("#searchBox").on("input", function() {
        var val = $(this).val();
        $("#liveResult").text("Searching: " + val);
    });
});

select() — Text Selection in Fields

$(document).ready(function() {
    $("#codeBox").select(function() {
        $("#hint").text("Text selected! You can now copy it.");
    });
});

This fires when the user highlights text inside a text field or textarea.

Practical: Complete Form Validation

$(document).ready(function() {
    $("#regForm").submit(function(event) {
        event.preventDefault();
        var name  = $("#fullName").val().trim();
        var email = $("#email").val().trim();
        var pass  = $("#password").val();
        var msg   = "";

        if (name === "")  msg += "Name is required.<br>";
        if (email === "") msg += "Email is required.<br>";
        if (pass.length < 6) msg += "Password must be at least 6 characters.<br>";

        if (msg !== "") {
            $("#formErrors").html(msg).css("color", "red");
        } else {
            $("#formErrors").text("Registration successful!").css("color", "green");
        }
    });
});

Diagram: Validation Logic

  User clicks Submit
         │
  submit() fires
         │
  Check name → empty? → add error message
  Check email → empty? → add error message
  Check password → too short? → add error message
         │
  Errors found? → show error messages in red
  No errors?    → show success message in green

Quick Summary

• submit() — intercepts form submission; use preventDefault() for custom validation.
• focus() — fires when user enters a field; great for showing hints.
• blur() — fires when user leaves a field; great for validation.
• change() — fires after value changes in dropdowns, checkboxes, and radio buttons.
• input() — fires on every keystroke; best for live search or character counters.