Skip to content

Latest commit

 

History

History
86 lines (64 loc) · 2.83 KB

module-3.5-working-with-forms-and-form-validation.md

File metadata and controls

86 lines (64 loc) · 2.83 KB
Raw

Module 3: Advanced DOM Manipulation

3.5. Working with Forms and Form Validation

Forms are a fundamental part of web applications, allowing users to input data. In this submodule, we will explore working with HTML forms and implementing form validation using JavaScript.

Creating a Simple Form

Let's begin by creating a basic HTML form:

<!DOCTYPE html>
<html>
<head>
  <title>Simple Form</title>
</head>
<body>
  <h1>Contact Us</h1>
  <form id="contactForm">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required><br><br>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required><br><br>
    
    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="4" required></textarea><br><br>
    
    <input type="submit" value="Submit">
  </form>
</body>
</html>

In this example, we have a simple form with fields for name, email, and a message. The required attribute ensures that users must fill in these fields.

JavaScript Form Validation

JavaScript can be used to enhance form validation. Here's how you can implement simple validation for the email field:

<!DOCTYPE html>
<html>
<head>
  <title>Form Validation</title>
  <script>
    function validateForm() {
      const email = document.getElementById("email").value;
      const emailPattern = /^\w+@[a-zA-Z_]+\.[a-zA-Z]{2,3}$/;
      
      if (!emailPattern.test(email)) {
        alert("Please enter a valid email address.");
        return false;
      }
      
      return true;
    }
  </script>
</head>
<body>
  <h1>Contact Us</h1>
  <form id="contactForm" onsubmit="return validateForm()">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required><br><br>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required><br><br>
    
    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="4" required></textarea><br><br>
    
    <input type="submit" value="Submit">
  </form>
</body>
</html>

In this example, we've added a JavaScript function validateForm() that checks if the entered email matches a regular expression pattern. If not, it displays an alert and prevents the form from submitting.

Advanced Form Handling

For more complex forms, you may want to use JavaScript libraries like React or Angular for form handling and validation. These libraries provide robust tools for managing form state, validation, and handling form submissions in a structured way.

Conclusion

Working with forms and form validation is an essential skill in web development. You can create basic forms using HTML, enhance them with JavaScript for client-side validation, and consider using advanced libraries for more complex forms in modern web applications.