recreate project
This commit is contained in:
@@ -0,0 +1,31 @@
|
||||
// name_validation.js
|
||||
export function validateNameLive(inputEl) {
|
||||
// Allow only letters, spaces, and dashes, 2–30 chars
|
||||
const nameRE = /^[A-Za-z -]{2,30}$/;
|
||||
const val = inputEl.value.trim();
|
||||
|
||||
const valid = nameRE.test(val);
|
||||
const message = valid ? '' : 'Only letters, spaces, or dashes (2–30 chars).';
|
||||
|
||||
// Toggle invalid class
|
||||
inputEl.classList.toggle('is-invalid', !valid);
|
||||
|
||||
// Find or create feedback element
|
||||
let feedback = inputEl.nextElementSibling;
|
||||
while (feedback && feedback.nodeType === Node.TEXT_NODE) {
|
||||
feedback = feedback.nextSibling;
|
||||
}
|
||||
if (!feedback || !feedback.classList.contains('invalid-feedback')) {
|
||||
feedback = document.createElement('div');
|
||||
feedback.className = 'invalid-feedback';
|
||||
inputEl.parentNode.insertBefore(feedback, inputEl.nextSibling);
|
||||
}
|
||||
|
||||
feedback.textContent = message;
|
||||
feedback.style.display = valid ? 'none' : 'block';
|
||||
|
||||
// Sync with browser constraint validation
|
||||
inputEl.setCustomValidity(valid ? '' : message);
|
||||
|
||||
return valid;
|
||||
}
|
||||
Reference in New Issue
Block a user