Form handling

Read, validate and submit forms: val(), serialize(), the submit event and preventDefault.

Lesson 8 of 90% of the track complete

What you'll learn

How to read form values with .val(), check them before sending, stop the normal page reload, and show friendly error messages.

Why it matters

Forms are how users give your site information. Validating in the browser gives instant feedback and saves a round trip to the server.

Explanation

.val() reads the value of an input, select or textarea. .val("text") sets it.
For checkboxes use .is(":checked"). For a radio group use $("input[name=plan]:checked").val().
.on("submit", fn) runs when the form is submitted. Call event.preventDefault() to stop the browser reloading the page, so you can handle it yourself (for example with AJAX).
.serialize() turns all the fields into a URL-style string such as name=Asha&email=a%40b.com.
.trim() through $.trim or the native String.trim() removes extra spaces.
Show errors with .text() and .addClass("error"), and clear them on the next attempt.

Example

Step-by-step walkthrough

The submit handler starts with event.preventDefault() so the page does not reload.
We clear the old error messages and red borders from the last attempt.
.val().trim() reads each field and removes extra spaces.
Each failed check writes a message next to the field and marks it red.
.is(":checked") tests the checkbox.
When everything passes, .serialize() builds the form data string, which is ready to send with AJAX. Fields without a name attribute are skipped, so here it is empty: add name="..." to the inputs to include them.

Try it yourself

Try submitting an empty form, then a valid one. Add name="name" and name="email" to the inputs to see them appear in the serialized string.

Validate a formjQuery

Ctrl+Enter to run

Common mistakes

Forgetting preventDefault(), so the page reloads and your messages vanish.
Using .attr("checked") to read a checkbox. Use .is(":checked").
Trusting only client-side checks.
Not clearing old errors before validating again.

Quick quiz

Question 1 of 3

Which reads the text in an input?

.val().text().value

Question 2 of 3

What does event.preventDefault() do on submit?

Stops the browser from submitting and reloading the pageClears the formSubmits twice

Question 3 of 3

What does .serialize() produce?

A URL-encoded string of the form's named fieldsA JSON objectAn array of elements

Summary

Read values with .val(), test checkboxes with .is(":checked").
Use the submit event and preventDefault().
Show clear errors, and validate on the server too.

Next: should you still use jQuery at all?

HTML

<style>
  .error { color: #b91c1c; font-size: 14px; }
  input.bad { border: 2px solid #b91c1c; }
</style>

<form id="signup">
  <p><input id="name" placeholder="Name"> <span class="error" id="nameErr"></span></p>
  <p><input id="email" placeholder="Email"> <span class="error" id="emailErr"></span></p>
  <p><label><input type="checkbox" id="agree"> I agree</label></p>
  <button type="submit">Join</button>
</form>
<p id="result"></p>

<script>
  $("#signup").on("submit", function (event) {
    event.preventDefault();
    $(".error").text("");
    $("input").removeClass("bad");

    const name = $("#name").val().trim();
    const email = $("#email").val().trim();
    let ok = true;

    if (name === "") {
      $("#nameErr").text("Please enter your name");
      $("#name").addClass("bad");
      ok = false;
    }
    if (email.indexOf("@") === -1) {
      $("#emailErr").text("Email needs an @");
      $("#email").addClass("bad");
      ok = false;
    }
    if (!$("#agree").is(":checked")) {
      ok = false;
      $("#result").text("Please tick the box");
    }

    if (ok) {
      $("#result").text("Welcome, " + name + "! " + $(this).serialize());
    }
  });
</script>