Movatterモバイル変換

[0]ホーム
URL:

Menu
×
See More 
Sign In
★+1 Get Certified Upgrade Teachers Spaces Bootcamps Get Certified Upgrade Teachers Spaces Bootcamps
   ❮     
     ❯   

Basic JavaScript

JS TutorialJS SyntaxJS VariablesJS OperatorsJS If ConditionsJS LoopsJS StringsJS NumbersJS FunctionsJS ObjectsJS ScopeJS DatesJS Temporal DatesJS ArraysJS SetsJS MapsJS IterationsJS MathJS RegExpJS DestructuringJS Data TypesJS ErrorsJS DebuggingJS ConventionsJS ReferencesJS 2026JS Versions

JS HTML

JS HTML DOMJS EventsJS ProjectsNew

JS Advanced

JS FunctionsJS ObjectsJS ClassesJS AsynchronousJS ModulesJS Meta & ProxyJS Typed ArraysJS DOM NavigationJS WindowsJS Web APIsJS AJAXJS JSONJS jQueryJS GraphicsJS ExamplesJS Reference


Project - Form Validation

In this project you will build a form with validation.

The form will show error messages under each input field, and it will not submit until everything is valid.

What You Will Learn

  • How to validate form fields with JavaScript
  • How to prevent a form from submitting
  • How to show error messages under inputs
  • How to check email and password rules

Step 1 - Create the HTML

Create a form with four fields and an error message under each field.

Example

<form>

<div>
  <label>Name:</label><br>
  <input type="text" placeholder="Your name">
  <p></p>
</div>

<form>
Try it Yourself »

Step 2 - Add the CSS

Example

<style>
input {
  padding: 8px;
  width: 260px;
  margin-bottom: 4px;
}
.error {
  color: red;
  margin: 0;
}
.ok {
  color: green;
  margin: 0;
}
.field {
  margin-bottom: 12px;
}
</style>
Try it Yourself »

Step 3 - Add JavaScript

You must create an object for each field.

Example

// Create an Object for each Field
const form = document.getElementById("signupForm");
const nameInput = document.getElementById("name");
const emailInput = document.getElementById("email");
const passInput = document.getElementById("password");
const confirmInput = document.getElementById("confirm");
const nameError = document.getElementById("nameError");
const emailError = document.getElementById("emailError");
const passError = document.getElementById("passwordError");
const confirmError = document.getElementById("confirmError");
const result = document.getElementById("result");

You need a function to diplay errors.

Example

// Function to Display Error
function showError(el, message) {
  el.innerHTML = message;
}

You need a function to clear the error field.

Example

// Function to Clear the Error
function clearError(el) {
  el.innerHTML = "";
}

You need a function to validate the form.

Example

// Function to Validate Form
function validateForm() {
  return false;
}

You need the code to validate the form.

To validate the form, you must stop the page from reloading.

Example

// Prevent Default Reloading
form.addEventListener("submit", function (event) {
  event.preventDefault();

// Clear Result
  result.innerHTML = "";

// Validate Form
  if (validateForm()) {
    result.innerHTML = "Form is valid!";
    result.className = "ok";
  } else {
    result.innerHTML = "Please fix the errors.";
    result.className = "error";
  }
});
Try it Yourself »

Step 4 - Validate Fields

Create one function per field.

Validate Name

// Function to Validate Name
function validateName() {
  let value = nameInput.value.trim();
  if (value.length < 2) {
    showError(nameError, "Name must be at least 2 characters.");
    return false;
  }
  clearError(nameError);
  return true;
}

// Function to Validate Form
function validateForm() {
  let okName = validateName();
  return okName;
}
Try it Yourself »

Validate Email

// Function to Validate Email
function validateEmail() {
  let value = emailInput.value.trim();
  if (!(/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value))) {
    showError(emailError, "Enter a valid email address.");
    return false;
  }
  clearError(emailError);
  return true;
}

// Function to Validate Form
function validateForm() {
  let okName = validateName();
  let okEmail = validateEmail();
  return okName && okEmail;
}
Try it Yourself »

Validate Password

// Function to Validate Password
function validatePassword() {
  let value = passInput.value;
  if (value.length < 8) {
    showError(passError, "Password must be at least 8 characters.");
    return false;
  }
  clearError(passError);
  return true;
}

// Function to Validate Form
function validateForm() {
  let okName = validateName();
  let okEmail = validateEmail();
  let okPass = validatePassword();
  return okName && okEmail && okPass;
}
Try it Yourself »

Validate Confirm

// Function to Validate Confirm
function validateConfirm() {
  let pass = passInput.value;
  let confirm = confirmInput.value;
  if (confirm === "") {
    showError(confirmError, "Please confirm your password.");
    return false;
  }
  if (confirm !== pass) {
    showError(confirmError, "Passwords do not match.");
    return false;
  }
  clearError(confirmError);
  return true;
}

// Function to Validate Form
function validateForm() {
  let okName = validateName();
  let okEmail = validateEmail();
  let okPass = validatePassword();
  let okConfirm = validateConfirm();
  return okName && okEmail && okPass && okConfirm;
}
Try it Yourself »

Form Validation (Finished)

This example shows the finished project.

The CSS

<style>
input {
  padding: 8px;
  width: 260px;
  margin-bottom: 4px;
}
.error {
  color: red;
  margin: 0;
}
.ok {
  color: green;
  margin: 0;
}
.field {
  margin-bottom: 12px;
}
</style>

The HTML

<!DOCTYPE html>
<html>
<style>
... CSS goes here
</style>

<body>
<h2>Sign Up</h2>

<form>

<div>
  <label>Name:</label><br>
  <input type="text" placeholder="Your name">
  <p></p>
</div>

<div>
  <label>Email:</label><br>
  <input type="text" placeholder="name@example.com">
  <p></p>
</div>

<div>
  <label>Password:</label><br>
  <input type="password" placeholder="Min 8 characters">
  <p></p>
</div>

<div>
  <label>Confirm Password:</label><br>
  <input type="password" placeholder="Repeat password">
  <p></p>
</div>

<p><button type="submit">Create Account</button></p>

</form>

<p></p>

<script>
// JavaScript goes here
</script>

</body>
</html>

The JavaScript

// Create an Object for each Field
const form = document.getElementById("signupForm");
const nameInput = document.getElementById("name");
const emailInput = document.getElementById("email");
const passInput = document.getElementById("password");
const confirmInput = document.getElementById("confirm");
const nameError = document.getElementById("nameError");
const emailError = document.getElementById("emailError");
const passError = document.getElementById("passwordError");
const confirmError = document.getElementById("confirmError");
const result = document.getElementById("result");

// Function to Display Error
function showError(el, message) {
  el.innerHTML = message;
}

// Function to Clear Error
function clearError(el) {
  el.innerHTML = "";
}

// Function to Validate Name
function validateName() {
  let value = nameInput.value.trim();
  if (value.length < 2) {
    showError(nameError, "Name must be at least 2 characters.");
    return false;
  }
  clearError(nameError);
  return true;
}

// Function to Validate Email
function validateEmail() {
  let value = emailInput.value.trim();
  if (!(/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value))) {
    showError(emailError, "Enter a valid email address.");
    return false;
  }
  clearError(emailError);
  return true;
}

// Function to Validate Password
function validatePassword() {
  let value = passInput.value;
  if (value.length < 8) {
    showError(passError, "Password must be at least 8 characters.");
    return false;
  }
  clearError(passError);
  return true;
}

// Function to Validate Confirm
function validateConfirm() {
  let pass = passInput.value;
  let confirm = confirmInput.value;
  if (confirm === "") {
    showError(confirmError, "Please confirm your password.");
    return false;
  }
  if (confirm !== pass) {
    showError(confirmError, "Passwords do not match.");
    return false;
  }
  clearError(confirmError);
  return true;
}

// Function to Validate Form
function validateForm() {
  let okName = validateName();
  let okEmail = validateEmail();
  let okPass = validatePassword();
  let okConfirm = validateConfirm();
  return okName && okEmail && okPass && okConfirm;
}

// Prevent Default Reloading
form.addEventListener("submit", function (event) {
  event.preventDefault();

// Clear Result
  result.innerHTML = "";

// Validate Form
  if (validateForm()) {
    result.innerHTML = "Form is valid!";
    result.className = "ok";
  } else {
    result.innerHTML = "Please fix the errors.";
    result.className = "error";
  }
});
Try it Yourself »

Common Mistakes

  • Forgettingevent.preventDefault()
  • Not trimming the input values
  • UsinginnerHTML with user input (use text only for messages)

Exercises

Exercise 1

Add a rule that the password must contain at least one number.

Exercise 2

Validate fields while the user is typing (use the input event).

Exercise 3

Show a green message next to fields that are valid.

Bonus Challenges (Level Up)

  • Add password strength indicator (Weak / Medium / Strong)
  • Disable the submit button until everything is valid
  • Show/hide password button
×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness
of all content. While using W3Schools, you agree to have read and accepted ourterms of use,cookies andprivacy policy.

Copyright 1999-2026 by Refsnes Data. All Rights Reserved.W3Schools is Powered by W3.CSS.

-->
[8]ページ先頭
©2009-2026 Movatter.jp