jQuery & DOM Manipulation

Form Events

15 min Lesson 19 of 30

Working with Form Events in jQuery

Form events are crucial for creating interactive and validated user input experiences. jQuery simplifies form handling with powerful event methods.

Common Form Events

submit: Triggered when a form is submitted
focus: When an input field receives focus
blur: When an input field loses focus
change: When the value of an input changes
input: When the user inputs data (real-time)
select: When text is selected in an input

Submit Event

The submit event is triggered when a user submits a form. It's commonly used for form validation:

Basic Form Submission:

<form id="loginForm">
    <input type="text" id="username" placeholder="Username">
    <input type="password" id="password" placeholder="Password">
    <button type="submit">Login</button>
</form>

<script>
$("#loginForm").on("submit", function(event) {
    event.preventDefault(); // Prevent default form submission

    let username = $("#username").val();
    let password = $("#password").val();

    console.log("Username:", username);
    console.log("Password:", password);

    // Perform AJAX submission or validation here
});
</script>

Important: Always use event.preventDefault() in the submit handler to prevent the page from reloading, especially when using AJAX.

Focus and Blur Events

These events help create better user experiences with visual feedback:

Focus and Blur Example:

<input type="text" id="email" placeholder="Enter email">
<span id="emailHelp" style="display:none;">
    Please enter a valid email address
</span>

<script>
$("#email").on("focus", function() {
    $(this).css("border-color", "var(--primary)");
    $("#emailHelp").fadeIn();
}).on("blur", function() {
    $(this).css("border-color", "#ddd");
    $("#emailHelp").fadeOut();
});
</script>

Change Event

The change event fires when the value changes and the element loses focus. Great for dropdowns and checkboxes:

Select Dropdown Change:

<select id="country">
    <option value="">Select Country</option>
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="ca">Canada</option>
</select>
<div id="selectedCountry"></div>

<script>
$("#country").on("change", function() {
    let selected = $(this).val();
    let text = $(this).find("option:selected").text();

    $("#selectedCountry").html("You selected: <strong>" + text + "</strong>");
});
</script>

Checkbox Change:

<input type="checkbox" id="terms">
<label for="terms">I agree to the terms and conditions</label>
<button id="submitBtn" disabled>Submit</button>

<script>
$("#terms").on("change", function() {
    if ($(this).is(":checked")) {
        $("#submitBtn").prop("disabled", false);
    } else {
        $("#submitBtn").prop("disabled", true);
    }
});
</script>

Input Event (Real-time)

The input event fires immediately when the value changes, unlike change which waits for blur:

Real-time Character Counter:

<textarea id="message" maxlength="200"></textarea>
<div id="charCount">0/200 characters</div>

<script>
$("#message").on("input", function() {
    let length = $(this).val().length;
    let maxLength = $(this).attr("maxlength");

    $("#charCount").text(length + "/" + maxLength + " characters");

    // Change color when nearing limit
    if (length > maxLength * 0.9) {
        $("#charCount").css("color", "red");
    } else {
        $("#charCount").css("color", "var(--text-dark)");
    }
});
</script>

Form Validation Example

Complete Registration Form with Validation:

<form id="registrationForm">
    <div>
        <input type="text" id="regUsername" placeholder="Username" required>
        <span class="error" id="usernameError"></span>
    </div>
    <div>
        <input type="email" id="regEmail" placeholder="Email" required>
        <span class="error" id="emailError"></span>
    </div>
    <div>
        <input type="password" id="regPassword" placeholder="Password" required>
        <span class="error" id="passwordError"></span>
    </div>
    <button type="submit">Register</button>
</form>

<script>
$(document).ready(function() {
    // Real-time username validation
    $("#regUsername").on("input", function() {
        let username = $(this).val();

        if (username.length < 3) {
            $("#usernameError").text("Username must be at least 3 characters");
        } else if (!/^[a-zA-Z0-9_]+$/.test(username)) {
            $("#usernameError").text("Only letters, numbers and underscore allowed");
        } else {
            $("#usernameError").text("").css("color", "green").text("✓");
        }
    });

    // Email validation on blur
    $("#regEmail").on("blur", function() {
        let email = $(this).val();
        let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

        if (!emailPattern.test(email)) {
            $("#emailError").text("Please enter a valid email address");
        } else {
            $("#emailError").text("").css("color", "green").text("✓");
        }
    });

    // Password strength indicator
    $("#regPassword").on("input", function() {
        let password = $(this).val();
        let strength = 0;

        if (password.length >= 8) strength++;
        if (/[a-z]/.test(password)) strength++;
        if (/[A-Z]/.test(password)) strength++;
        if (/[0-9]/.test(password)) strength++;
        if (/[^a-zA-Z0-9]/.test(password)) strength++;

        let strengthText = ["Very Weak", "Weak", "Fair", "Good", "Strong"];
        let colors = ["#ff0000", "#ff6600", "#ffcc00", "#99cc00", "#00cc00"];

        $("#passwordError")
            .text("Strength: " + strengthText[strength - 1])
            .css("color", colors[strength - 1]);
    });

    // Form submission
    $("#registrationForm").on("submit", function(event) {
        event.preventDefault();

        // Check if all validations pass
        let isValid = true;

        $(".error").each(function() {
            if ($(this).text() !== "✓" && $(this).text() !== "") {
                isValid = false;
            }
        });

        if (isValid) {
            alert("Form submitted successfully!");
            // Perform AJAX submission here
        } else {
            alert("Please fix all errors before submitting");
        }
    });
});
</script>

Select Event

Triggered when text is selected in an input or textarea:

Text Selection Example:

<input type="text" id="selectText" value="Select some text in this field">
<div id="selectedText"></div>

<script>
$("#selectText").on("select", function() {
    let selected = $(this).val().substring(
        this.selectionStart,
        this.selectionEnd
    );
    $("#selectedText").text("Selected: " + selected);
});
</script>

Radio Button Handling

Radio Button Selection:

<form>
    <label>
        <input type="radio" name="payment" value="credit"> Credit Card
    </label>
    <label>
        <input type="radio" name="payment" value="paypal"> PayPal
    </label>
    <label>
        <input type="radio" name="payment" value="bank"> Bank Transfer
    </label>
</form>
<div id="paymentMethod"></div>

<script>
$('input[name="payment"]').on("change", function() {
    let method = $(this).val();
    $("#paymentMethod").text("Payment method: " + method);
});
</script>

Common Mistake: Using .val() vs .text() - Use .val() for form inputs and .text() or .html() for display elements.

Practical Example: Contact Form with Live Validation

Complete Contact Form:

<form id="contactForm" class="form-container">
    <h2>Contact Us</h2>

    <div class="form-group">
        <input type="text" id="name" placeholder="Your Name" required>
        <span class="validation-msg" id="nameMsg"></span>
    </div>

    <div class="form-group">
        <input type="email" id="contactEmail" placeholder="Email" required>
        <span class="validation-msg" id="emailMsg"></span>
    </div>

    <div class="form-group">
        <select id="subject" required>
            <option value="">Select Subject</option>
            <option value="general">General Inquiry</option>
            <option value="support">Support</option>
            <option value="feedback">Feedback</option>
        </select>
    </div>

    <div class="form-group">
        <textarea id="contactMessage" rows="5" placeholder="Your Message" required></textarea>
        <span class="char-counter" id="charCounter">0/500</span>
    </div>

    <button type="submit" id="submitContact">Send Message</button>
</form>

<script>
$(document).ready(function() {
    // Name validation
    $("#name").on("blur", function() {
        let name = $(this).val().trim();
        if (name.length < 2) {
            $("#nameMsg").text("Name is too short").css("color", "red");
            return false;
        } else {
            $("#nameMsg").text("✓").css("color", "green");
            return true;
        }
    });

    // Email validation
    $("#contactEmail").on("blur", function() {
        let email = $(this).val();
        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
            $("#emailMsg").text("Invalid email").css("color", "red");
            return false;
        } else {
            $("#emailMsg").text("✓").css("color", "green");
            return true;
        }
    });

    // Character counter
    $("#contactMessage").on("input", function() {
        let length = $(this).val().length;
        $("#charCounter").text(length + "/500");

        if (length > 500) {
            $(this).val($(this).val().substring(0, 500));
        }
    });

    // Form submission
    $("#contactForm").on("submit", function(event) {
        event.preventDefault();

        // Validate all fields
        let valid = true;

        if ($("#name").val().trim().length < 2) valid = false;
        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test($("#contactEmail").val())) valid = false;
        if ($("#subject").val() === "") valid = false;
        if ($("#contactMessage").val().trim().length < 10) valid = false;

        if (valid) {
            // Disable submit button
            $("#submitContact").prop("disabled", true).text("Sending...");

            // Simulate AJAX submission
            setTimeout(function() {
                alert("Message sent successfully!");
                $("#contactForm")[0].reset();
                $("#submitContact").prop("disabled", false).text("Send Message");
                $(".validation-msg").text("");
            }, 2000);
        } else {
            alert("Please fill all fields correctly");
        }
    });
});
</script>

Practice Exercise:

Task: Create a survey form with the following features:

Text input for name (min 3 characters)
Email input with validation
Age range selector (dropdown: 18-25, 26-35, 36-45, 46+)
Rating system using radio buttons (1-5 stars)
Comments textarea with 300 character limit and counter
Submit button that validates all fields
Display a summary of all inputs before final submission

Bonus: Add a "Clear Form" button that resets all fields and validations.

Key Takeaways

Use event.preventDefault() to prevent default form submission
.val() gets or sets form input values
Use blur for validation after user leaves field
Use input event for real-time feedback
.is(":checked") checks checkbox/radio state
Always validate on both client and server side