search

Home  >  Article  >  Web Front-end  >  Implementing Form Validation with Vanilla JS (Beginner-Friendly)

Implementing Form Validation with Vanilla JS (Beginner-Friendly)

WBOY
WBOYOriginal
2024-08-06 00:58:21392browse

Implementing Form Validation with Vanilla JS (Beginner-Friendly)

Practice Exercise: Form Validation

Objective

Create a basic form with fields for name, email, and password. Implement JavaScript validation to ensure the fields are correctly filled out before submission. This a simple code-along project meant to get you started with basic form validation in JS.

Requirements

  1. HTML Form: Create an HTML form with inputs for name, email, and password.
  2. CSS Styling: Add basic styling to make the form look clean and user-friendly.
  3. JavaScript Validation: Implement JavaScript to validate the form fields.

Step-by-Step Instructions

Step 1: Set Up the HTML Structure

  1. Create a New HTML File

    • Create a new file named index.html.

  2. Add the HTML Boilerplate

    • Add the basic HTML boilerplate to your file: 
     <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Form Validation</title>
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
     <form id="registrationForm">
         <h2>Registration Form</h2>
         <div>
             <label for="name">Name:</label>
             <input type="text" id="name" name="name">
             <span id="nameError" class="error"></span>
         </div>
         <div>
             <label for="email">Email:</label>
             <input type="email" id="email" name="email">
             <span id="emailError" class="error"></span>
         </div>
         <div>
             <label for="password">Password:</label>
             <input type="password" id="password" name="password">
             <span id="passwordError" class="error"></span>
         </div>
         <button type="submit">Register</button>
     </form>
     <script src="script.js"></script>
 </body>
 </html>

  3. Add the Form Elements

    • Ensure your form includes fields for name, email, and password, each with a corresponding error message span.

Step 2: Add Basic CSS Styling

  1. Create a New CSS File

    • Create a new file named styles.css.

  2. Add Basic Styles

    • Add basic styles to make the form look clean and user-friendly: 
     body {
     font-family: Arial, sans-serif;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
     background-color: #f4f4f4;
     margin: 0;
 }

 form {
     background: #fff;
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     max-width: 400px;
     width: 100%;
 }

 div {
     margin-bottom: 15px;
 }

 label {
     display: block;
     margin-bottom: 5px;
 }

 input {
     width: 100%;
     padding: 8px;
     box-sizing: border-box;
 }

 .error {
     color: red;
     font-size: 12px;
 }

 button {
     background-color: #007BFF;
     color: #fff;
     padding: 10px;
     border: none;
     border-radius: 5px;
     cursor: pointer;
 }

 button:hover {
     background-color: #0056b3;
 }

Step 3: Implement JavaScript Validation

  1. Create a New JavaScript File

    • Create a new file named script.js.

  2. Add Event Listener to Form

    • Add an event listener to the form to handle form submission: 
     document.getElementById('registrationForm').addEventListener('submit', function(event) {
     event.preventDefault();
     validateForm();
 });

  3. Create the Validation Function

    • Add a function to validate the form fields: 
     function validateForm() {
     // Clear previous error messages
     document.getElementById('nameError').innerText = '';
     document.getElementById('emailError').innerText = '';
     document.getElementById('passwordError').innerText = '';

     // Get form values
     const name = document.getElementById('name').value;
     const email = document.getElementById('email').value;
     const password = document.getElementById('password').value;

     // Validation flags
     let isValid = true;

     // Validate name
     if (name.trim() === '') {
         document.getElementById('nameError').innerText = 'Name is required';
         isValid = false;
     }

     // Validate email
     if (email.trim() === '') {
         document.getElementById('emailError').innerText = 'Email is required';
         isValid = false;
     } else if (!validateEmail(email)) {
         document.getElementById('emailError').innerText = 'Email is not valid';
         isValid = false;
     }

     // Validate password
     if (password.trim() === '') {
         document.getElementById('passwordError').innerText = 'Password is required';
         isValid = false;
     } else if (password.length < 6) {
         document.getElementById('passwordError').innerText = 'Password must be at least 6 characters';
         isValid = false;
     }

     // If all fields are valid, submit the form (for demonstration, we'll just alert a message)
     if (isValid) {
         alert('Form submitted successfully!');
     }
 }

 // Email validation function
 function validateEmail(email) {
     const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
     return re.test(String(email).toLowerCase());
 }

Step 4: Test the Form

  1. Open index.html in a Browser
    • Open your HTML file in a web browser to test the form validation.
    • Try submitting the form with different inputs to ensure the validation works as expected.

Feel free to play around with the code and express your creativity.

Happy coding!

The above is the detailed content of Implementing Form Validation with Vanilla JS (Beginner-Friendly). For more information, please follow other related articles on the PHP Chinese website!

JavaScript css html express for try Error Event JS function this
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Decline in Coding: Web App Developers Writing Code Drops to in [Research Results]Next article：Decline in Coding: Web App Developers Writing Code Drops to in [Research Results]

Related articles

See more