jQuery·jQuery from selection to migration

Forms and validation

Serialize forms, prevent double submits and show field errors.

Beginner 13 min read Lesson 7 of 300 Challenge included

What you will be able to do

Use .on("submit") and preventDefault.
Use .serialize or FormData.
Disable the submit button while saving.
Show errors next to the field.

In plain English

jQuery makes form handling convenient: .serialize turns fields into a query string, .val reads controls and .on("submit") can prevent the default. Always validate on the server.

form.jsJavaScript

$('#signup').on('submit', function (event) {
  event.preventDefault()
  const $button = $(this).find('button[type=submit]').prop('disabled', true)
  $.post('/api/signup', $(this).serialize())
    .done(() => $('#status').text('Saved'))
    .fail(() => $('#status').text('Try again'))
    .always(() => $button.prop('disabled', false))
})

Your turn

Prevent the default submit

Easy

Prevent the default form submission in a submit handler.

JAVASCRIPT · starter

$('#form').on('submit', function (event) {

Check your understanding before moving on.

Knowledge checkQuestion 1

What does .serialize() produce?

Select an answer to continue

Study tools

Make it yours.

Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.

Sign in to save notes and flashcards.Both are private to your account and stay with your progress.

Finished reading?

Lock in what you just learned.

Mark this lesson complete to save your place and move one step closer to the certificate.

Next: Plugins and utilities

Lesson 7 of 300 · 0% of course