JavaScript Forms & Validation

Why forms matter

Login, signup, contact, search, checkout aur profile pages sab forms par depend karte hain. HTML form structure provide karta hai; JavaScript interaction, validation and dynamic feedback add karta hai.

A basic form

Every form control should have a meaningful label and name. The name attribute matters when form data is collected.

<form id="profile-form">
  <label for="name">Name</label>
  <input id="name" name="name" required>

  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>

  <button type="submit">Save profile</button>
</form>

Listening for submit

Form logic ko form ke submit event par handle karo, sirf button ke click par nahi. Keyboard se Enter bhi form submit kar sakta hai.

const form = document.querySelector("#profile-form");

form.addEventListener("submit", event => {
  event.preventDefault();
  console.log("Form submitted");
});

preventDefault() demo ya client-side handling me useful hai. Real form ko bina reason permanently block mat karo.

Reading input values

Text-like inputs ka current value .value property se milta hai.

const nameInput = document.querySelector("#name");
const emailInput = document.querySelector("#email");

console.log(nameInput.value);
console.log(emailInput.value);

Checkboxes and radio buttons

Checkbox and radio controls ke liye checked property important hai.

const terms = document.querySelector("#terms");
console.log(terms.checked);

const selectedLevel = document.querySelector('input[name="level"]:checked');
console.log(selectedLevel?.value ?? "No level selected");

Select values

A single-select element ki selected value bhi .value se read hoti hai.

const courseSelect = document.querySelector("#course");
console.log(courseSelect.value);

FormData

FormData form ke successful named controls ko collect karta hai. Ye many forms ke liye manually every input select karne se cleaner ho sakta hai.

const form = document.querySelector("#profile-form");

form.addEventListener("submit", event => {
  event.preventDefault();

  const data = new FormData(form);
  console.log(data.get("name"));
  console.log(data.get("email"));
});

Multiple controls with the same name ke liye getAll() useful ho sakta hai.

FormData to object

Simple single-value fields ko object me convert kar sakte ho.

const data = new FormData(form);
const values = Object.fromEntries(data.entries());
console.log(values);

HTML built-in validation

JavaScript likhne se pehle HTML validation attributes use karo.

<input name="email" type="email" required>
<input name="username" minlength="3" maxlength="20" required>
<input name="age" type="number" min="13" max="120">

• required — empty value reject karta hai.
• type="email" — basic email format constraint deta hai.
• minlength/maxlength — text length limits.
• min/max/step — numeric/date constraints.
• pattern — regular-expression based text constraint.

checkValidity() and reportValidity()

Constraint Validation API se browser validation state check ki ja sakti hai.

if (form.checkValidity()) {
  console.log("Form is valid");
} else {
  form.reportValidity();
}

checkValidity() boolean return karta hai. reportValidity() browser validation UI show karne ki request karta hai.

The validity state

Individual controls ka validity object reason batata hai ki value invalid kyun hai.

const email = document.querySelector("#email");

console.log(email.validity.valueMissing);
console.log(email.validity.typeMismatch);
console.log(email.validity.valid);

Custom validation logic

Business rules jo HTML attributes se express nahi hote, unke liye JavaScript custom validation add kar sakta hai.

function validateUsername(value) {
  const username = value.trim();

  if (username.length < 3) {
    return "Username must be at least 3 characters";
  }

  if (username.includes(" ")) {
    return "Username cannot contain spaces";
  }

  return "";
}

setCustomValidity()

setCustomValidity() control ko custom invalid message de sakta hai. Empty string set karne par custom error clear hota hai.

const username = document.querySelector("#username");

username.addEventListener("input", () => {
  const message = validateUsername(username.value);
  username.setCustomValidity(message);
});

Accessible error messages

Custom errors visible text me show karo aur input se programmatically connect karo.

<label for="username">Username</label>
<input id="username" name="username" aria-describedby="username-error">
<p id="username-error"></p>

const input = document.querySelector("#username");
const error = document.querySelector("#username-error");

function showError(message) {
  error.textContent = message;
  input.setAttribute("aria-invalid", message ? "true" : "false");
}

Live validation: use carefully

Every keystroke par aggressive error show karna frustrating ho sakta hai. A common approach: required format hints pehle se show karo, then user interaction ke baad helpful feedback do.

For some fields, input event immediate feedback ke liye useful hai; for others, submit-time validation simpler aur less distracting ho sakti hai.

Matching fields example

Confirm-password type rule custom JavaScript validation ka common example hai.

const password = document.querySelector("#password");
const confirmPassword = document.querySelector("#confirm-password");

function validatePasswords() {
  const matches = password.value === confirmPassword.value;
  confirmPassword.setCustomValidity(
    matches ? "" : "Passwords do not match"
  );
}

A practical submit flow

Client-side validation ka clean flow: normalize values, custom rules update karo, browser validity check karo, then valid data process karo.

form.addEventListener("submit", event => {
  event.preventDefault();

  validatePasswords();

  if (!form.checkValidity()) {
    form.reportValidity();
    return;
  }

  const data = new FormData(form);
  console.log(Object.fromEntries(data.entries()));
});

Focus the first invalid field

Custom validation flows me first invalid control ko focus karna user ko problem tak quickly le ja sakta hai.

const firstInvalid = form.querySelector(":invalid");
firstInvalid?.focus();

Client validation is not security

Browser-side validation user experience improve karti hai, but users requests modify kar sakte hain. Important validation and authorization server side par bhi required hoti hai.

Progressive enhancement

Where practical, form ko semantic HTML aur native browser behavior ke saath usable rakho. JavaScript extra convenience add kare — jaise instant hints, dynamic fields, character counters or async submission.

Resetting a form

form.reset() controls ko unke initial values par reset karta hai.

form.reset();

Custom error text, classes or app state automatically reset nahi hote — unhe separately clear karna pad sakta hai.

Common beginner mistakes

• Submit button click ko listen karke keyboard submission miss karna.
• Every form par blindly preventDefault() lagana.
• Labels skip karke placeholders par depend karna.
• name attribute bhool jana when using FormData.
• Checkbox ke liye value dekhna but checked ignore karna.
• Native HTML validation available hote hue everything JavaScript me rebuild karna.
• Error ko sirf red color se show karna.
• Custom error set karke later empty string se clear na karna.
• Client-side validation ko secure validation samajhna.
• User input ko innerHTML me unsafe inject karna.

Beginner best practices

• Semantic form controls and visible labels use karo.
• HTML constraints first, JavaScript custom rules second.
• Form submit event ko primary entry point banao.
• Validation messages specific aur actionable rakho.
• Errors ko input ke saath aria-describedby se connect karo where helpful.
• Invalid state me aria-invalid update karo when custom UI is used.
• Plain text feedback ke liye textContent use karo.
• Validation functions small and reusable rakho.
• Client and server validation dono plan karo.

Chapter checklist

• Form ka submit event handle kar sakte ho?
• Text, checkbox, radio aur select values read kar sakte ho?
• FormData use kar sakte ho?
• HTML required, type, minlength, min/max constraints samajh aaye?
• checkValidity(), reportValidity() aur validity ka role clear hai?
• setCustomValidity() se custom rule connect kar sakte ho?
• Accessible error message pattern samajh aaya?
• Client-side validation ki security limitation clear hai?