Exercise 2: Form: Required Fields Validation
Problem Statement
Create a function `validateRequired(formEl, names)`. Given input names list, set `data-error="Required"` on empty fields and return boolean.
Sample Output:
validateRequired(formEl, ["email", "password"])
// If email empty: formEl.elements.namedItem("email").getAttribute("data-error") => "Required", returns false
// If all filled: returns trueSolution
const validateRequired = (formEl, names) => {
let ok = true;
for (const name of names) {
const el = formEl.elements.namedItem(name);
const val = (el?.value ?? '').trim();
if (!val) { el?.setAttribute('data-error', 'Required'); ok = false; }
else el?.removeAttribute('data-error');
}
return ok;
};Explanation
Overall Goal:
- Form ke required fields ko validate karna.
- Empty fields pe error attribute set karna.
- Validation result (true/false) return karna.
Line 1: Function header
const validateRequired = (formEl, names) => {formEl→ form element reference.names→ array of input names to validate.
Line 2: Validation flag
let ok = true;→ initial assumption: sab valid hain.- Agar koi invalid milega to
falseset hoga.
Line 3: Loop through names
for (const name of names) {→ har input name ke liye loop.
Line 4: Find element
const el = formEl.elements.namedItem(name);formEl.elements→ form ke sabhi form elements ka collection..namedItem(name)→ name attribute se element find karta hai.
Line 5: Get and check value
const val = (el?.value ?? '').trim();el?.value→ optional chaining: element exist ho to value, warna undefined.?? ''→ nullish coalescing: undefined ho to empty string..trim()→ spaces remove.
Line 6: Set error if empty
if (!val) { el?.setAttribute('data-error', 'Required'); ok = false; }!val→ agar value empty hai:el?.setAttribute(...)→ error attribute set.ok = false→ validation fail.
Line 7: Remove error if filled
else el?.removeAttribute('data-error');- Agar value filled hai → error attribute remove.
Line 8: Return result
return ok;→ validation result return.
Real world:
- Form submissions: pehle client-side validation.
- User feedback: real-time error messages.
- API calls: invalid data submit se pehle rokna.