✅ JavaScript Form Validation in HTML

 

---

📌 Title: How to Validate Forms Using JavaScript (Without Any Library)

🧾 HTML Form Example

<form id="myForm">
  <input type="text" id="username" placeholder="Username" required />
  <input type="email" id="email" placeholder="Email" required />
  <button type="submit">Submit</button>
  <p id="error" style="color:red;"></p>
</form>

---

🛠 JavaScript Validation

document.getElementById('myForm').addEventListener('submit', function (e) {
  e.preventDefault();

  let username = document.getElementById('username').value.trim();
  let email = document.getElementById('email').value.trim();
  let error = document.getElementById('error');

  if (username === '' || email === '') {
    error.textContent = 'All fields are required.';
  } else if (!email.includes('@')) {
    error.textContent = 'Please enter a valid email.';
  } else {
    error.textContent = '';
    alert('Form submitted successfully!');
  }
});

---

✅ Output

• Empty fields show error

• Valid submission shows alert