Validation Guide - Forms101

1. The Easy Way: HTML5 Attributes

Modern browsers can do a lot of checking for you without writing any code! Just add special attributes to your inputs.

required: The field cannot be empty.
minlength="5": Must be at least 5 characters.
max="100": Number cannot be higher than 100.

HTML5 Validation Demo

Challenge: Try clicking Submit without typing anything. Then try typing a short name.

HTML

<form>
  <label>Username (required, min 5 chars):</label>
  <br>
  <input type="text" required minlength="5">
  <br><br>
  <button>Submit</button>
</form>

Preview

2. The Powerful Way: JavaScript

Sometimes we need more complex rules (like checking if two passwords match). For this, we use JavaScript to intercept the form submission.

Step A: Stop the Train!

By default, a form refreshes the page when submitted. We want to stop that so we can check the data first. We use event.preventDefault().

Stopping Form Submission

HTML

<form id="myForm">
  <input type="text" placeholder="Type here...">
  <button>Submit (Watch Console)</button>
</form>

JavaScript

// 1. Find the form and attach event listener
document.getElementById('myForm').addEventListener('submit', function(event) {
  // 2. Stop the page reload
  event.preventDefault();
  
  // 3. Log a message
  console.log("Form submission stopped! We can now check data.");
});

Preview

Step B: Checking the Data

Now that we stopped the form, we can look at what the user typed. We need to:

Give the input an id so we can find it.
Use document.getElementById('...').value to get the text.
Use an if statement to check it.

Full Validation Example

HTML

<form id="loginForm">
  <label>Secret Password:</label>
  <input type="password" id="secret-pass">
  <button>Login</button>
  <p id="error-msg" style="color: red;"></p>
</form>

JavaScript

document.getElementById('loginForm').addEventListener('submit', function(event) {
  event.preventDefault(); // Stop reload
  
  // Get the value from the input box
  let password = document.getElementById("secret-pass").value;
  
  // Check if it's correct
  if (password === "pizza") {
    console.log("Access Granted!");
    alert("Access Granted!");
  } else {
    console.log("Access Denied: Wrong password.");
    // Show error on screen
    document.getElementById("error-msg").innerText = "Wrong password! Try 'pizza'";
  }
});

Preview

3. Final Challenge: The Age Gate

Mission: create a validateAge() function.

Get the value from the age input.
If age is less than 18, show an alert saying "You are too young!".
If age is 18 or older, show an alert saying "Welcome!".

Age Validation Challenge

HTML

<form id="ageForm">
  <label>Enter your age:</label>
  <input type="number" id="user-age">
  <button>Enter Site</button>
</form>

JavaScript

document.getElementById('ageForm').addEventListener('submit', function(event) {
  event.preventDefault();
  
  // 1. Get the value (hint: document.getElementById)
  let ageInput = document.getElementById("user-age").value;
  
  // 2. Check the number (hint: if statement)
  // Write your code below...
  
  console.log("User typed:", ageInput);
});

Preview

← Back to Home

Form Validation

1. The Easy Way: HTML5 Attributes

2. The Powerful Way: JavaScript

Step A: Stop the Train!

Step B: Checking the Data

3. Final Challenge: The Age Gate