Forms & Validation

Overview

Detailed Explanation

Practical Steps

1. 1
   Create a Basic Form 5 mins

   Build a form to collect a user's name with a submit button.

   • Create a <form> tag
   • Add an <input> and a <button>
   • Give the form and input IDs so JS can find them

   <form id="myForm">
     <input type="text" id="nameInput" placeholder="Your Name">
     <button type="submit">Send</button>
   </form>

2. 2
   Stop the Page Refresh 3 mins

   By default, submitting a form reloads the whole page. We need to stop that using JavaScript.

   • Listen for the 'submit' event on the form
   • Call e.preventDefault() to stop the reload

   <script>
   const form = document.getElementById('myForm');
   const input = document.getElementById('nameInput');
   
   form.addEventListener('submit', (e) => {
     e.preventDefault(); // This is the magic spell!
     alert(`Hello, ${input.value}`);
   });
   </script>

3. 3
   Empty Field Validation 5 mins

   Show an error if the user tries to submit an empty form.

   • Check if the input value is empty ('')
   • If empty, alert and 'return' to stop execution

   <script>
   form.addEventListener('submit', (e) => {
     e.preventDefault();
     const val = input.value.trim(); // Removes accidental spaces
     if (val === '') {
       alert('Hey, type your name!');
       return; // Stops here
     }
     alert('Success: ' + val);
   });
   </script>

Frequently Asked Questions

Why do I need to write type="button" on my buttons inside a form?

Because any <button> inside a <form> acts like a 'Submit' button by default. If you just want a button that opens a popup, and you don't explicitly say `type="button"`, clicking it will instantly try to submit the form and refresh your page, driving you crazy.

Can't I just use HTML's 'required' attribute instead of writing JS validation?

HTML's `required` is awesome for basic stuff because it gives you free browser tooltips. But if you need complex rules like 'must be exactly 8 characters and contain a special symbol', you'll eventually need JavaScript. Doing both is the ultimate gigachad move for bulletproof forms.

What's the point of using .trim() before checking the input?

Users will accidentally hit the spacebar and submit forms. If you don't use `.trim()`, JS thinks a giant space ' ' is a valid name. `.trim()` nukes all the leading and trailing spaces, saving your database from filling up with ghosts.

Why use a <form> tag at all? Can't I just use a <div> and put an onClick event on the button?

You *could*, but then you lose browser superpowers. ` <form>` gives you the ability to submit by just hitting the 'Enter' key while typing in an input. If you build it with a `<div>`, you have to code the 'Enter key' logic yourself in JS, which is annoying.

Is required enough?

It's a minimum—add JS validation and clear errors for UX.

autocomplete?

Proper name/autocomplete boosts browser autofill and conversion.