Dynamic Form Validation JavaScript, HTML

👤 Sharing: AI
```html
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Form Validation</title>
<style>
  .error {
    color: red;
    font-size: 0.8em;
  }
</style>
</head>
<body>

<h1>Dynamic Form Validation</h1>

<form id="myForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <span id="nameError" class="error"></span>
  <br><br>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <span id="emailError" class="error"></span>
  <br><br>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password">
  <span id="passwordError" class="error"></span>
  <br><br>

  <label for="confirmPassword">Confirm Password:</label>
  <input type="password" id="confirmPassword" name="confirmPassword">
  <span id="confirmPasswordError" class="error"></span>
  <br><br>

  <button type="submit">Submit</button>
</form>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('myForm');
  const nameInput = document.getElementById('name');
  const emailInput = document.getElementById('email');
  const passwordInput = document.getElementById('password');
  const confirmPasswordInput = document.getElementById('confirmPassword');

  const nameError = document.getElementById('nameError');
  const emailError = document.getElementById('emailError');
  const passwordError = document.getElementById('passwordError');
  const confirmPasswordError = document.getElementById('confirmPasswordError');


  function validateName() {
    if (!nameInput.value) {
      nameError.textContent = 'Name is required.';
      return false;
    } else {
      nameError.textContent = '';
      return true;
    }
  }

  function validateEmail() {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailInput.value) {
      emailError.textContent = 'Email is required.';
      return false;
    } else if (!emailRegex.test(emailInput.value)) {
      emailError.textContent = 'Invalid email format.';
      return false;
    } else {
      emailError.textContent = '';
      return true;
    }
  }

  function validatePassword() {
    if (!passwordInput.value) {
      passwordError.textContent = 'Password is required.';
      return false;
    } else if (passwordInput.value.length < 8) {
      passwordError.textContent = 'Password must be at least 8 characters long.';
      return false;
    } else {
      passwordError.textContent = '';
      return true;
    }
  }

  function validateConfirmPassword() {
    if (!confirmPasswordInput.value) {
      confirmPasswordError.textContent = 'Confirm Password is required.';
      return false;
    } else if (confirmPasswordInput.value !== passwordInput.value) {
      confirmPasswordError.textContent = 'Passwords do not match.';
      return false;
    } else {
      confirmPasswordError.textContent = '';
      return true;
    }
  }


  nameInput.addEventListener('input', validateName);
  emailInput.addEventListener('input', validateEmail);
  passwordInput.addEventListener('input', validatePassword);
  confirmPasswordInput.addEventListener('input', validateConfirmPassword);


  form.addEventListener('submit', function(event) {
    event.preventDefault(); // Prevent default form submission

    const isNameValid = validateName();
    const isEmailValid = validateEmail();
    const isPasswordValid = validatePassword();
    const isConfirmPasswordValid = validateConfirmPassword();


    if (isNameValid && isEmailValid && isPasswordValid && isConfirmPasswordValid) {
      alert('Form submitted successfully!');
      // In a real application, you would submit the form data to the server here.
      form.reset(); // Clear the form after successful submission
    } else {
      alert('Please correct the errors in the form.');
    }
  });
});
</script>

</body>
</html>
```
👁️ Viewed: 8
Dynamic Form Validation JavaScript, HTML

Comments

Site Statistics
