JavaScript ile en pratik form validation nasıl kodlanır
Form validation (doğrulama) sorununu çözen yüzlerce node package var. Her birinin implementasyon, öğrenme maliyeti ve bağımlılık yükü var. Bu maliyetlerden kaçınmak ve gerektiğinde nokta atışı müdahalelerde bulunabilmek isterseniz kendi JavaScript form validation mekanizmanızı kurmanız gerekir. Peki nasıl?
Form doğrulama nedir?
Kullanıcıların formları tüm kurallara uygun şekilde doldurmasını isteriz, aksi taktirde veri tabanında anlamlandırılamayan (çöp) veriler saklayabiliriz. Bu o kadar önemli bir konudur ki form doğrulama işlemi kitabına uygun projelerde yalnızca arayüzde değil, backend katmanında da kontrol edilir.
Biz arayüzde yapılan form doğrulamaya odaklanacağız.
Neden yapılır?
Arayüzde yapılan form doğrulama işlemi iki amaca hizmet eder.
- Backend’e “olmamış” formlarla nafile istekler atmamak
- Kullanıcıdan istenen bilgileri, olabilecek en pratik ve çilesiz biçimde almak
Hadi başlayalım
Form doğrulama işlemi yapabilmek için yaygın kullanılan node package’lara başvurduğumuzda çok karmaşık bir template (HTML) girdisi istenebiliyor.
Önereceğim yöntemde aşağıdaki gibi bir formu, dinamik bir şekilde doğrulamak ve kullanıcıyı bilgilendirmek mümkün, hem de hiçbir sihirli (magic) yola başvurmadan.
<form validate>
<input type="text" name="username" placeholder="User Name" required data-pattern="username">
<input type="email" name="email" placeholder="Email" required>
<input type="password" name="password" placeholder="Password" required data-pattern="password">
<input type="tel" name="phone" placeholder="Phone" data-pattern="phone">
<select name="country" required>
<option value="">Country</option>
<option value="tr">Türkiye</option>
<option value="uk">United Kingdom</option>
</select>
<button type="submit">Submit</button>
</form>form elementinde beklenmedik bir attribute var, validate bu attribute ekliyoruz çünkü JavaScript yazarken bunu seçici (selector) olarak kullanacağız.
Bunun dışında dikkat etmeniz gereken, input’lardaki data-pattern adlı attribute. Bu attribute ile hangi doğrulamayı yapacağımızı yakalayacağız.
Pattern attribute düz HTML’de kullanılabilen modern bir self validation yöntemi. Ama bu o kadar karmaşık bilgiler alıyor ki, bu şekilde yazmılmış bir HTML okumak can sıkıcı oluyor. Sırf bu nedenden bile data-pattern adlı attribute icat etmeliydim.
Doğrulama kurallarımızı tanımlayalım
const patterns = {
username: {
pattern: '^[A-Za-z0-9]{3,}$',
message: 'Username must be at least 3 characters and contain only letters and numbers.'
},
password: {
pattern: '^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)[a-zA-Z\\d]{8,}$',
message: 'Password must be at least 8 characters and contain at least one uppercase letter, one lowercase letter and one number.'
},
phone: {
pattern: '^\\+?[0-9]{10,14}$',
message: 'Please enter a valid phone number (ex: +901234567890).'
}
// You can add more patterns here
};username: Alfa numeric karakterleri kabul et, ve 3 karakterden daha az olmasın.
password: En az bir büyük, bir küçük karakter, bir sayısal karakter, toplam 8 karakterden daha az olmasın
…
Buna benzer bir yapı kurduğunuzda LLM Chatbot’lardan istifade ederek, kendi kurallarınıza uygun regex pattern’lar yazdırabilirsiniz.
Tüm form doğrulanmadan butonu tıklatmayalım
// Handle the form to which we added the validate attribute
const form = document.querySelector('[validate]');
// Handle the submit button
const submitButton = form.querySelector('[validate] button[type="submit"]');
function checkFormValidity() {
const isValid = form.checkValidity();
submitButton.disabled = !isValid;
}Süper! böylece form arayüzde doğrulanmadan backend’e nafile istekler gitmeyecek.
Element’lere elimizdeki pattern’leri uygulayalım
// Apply patterns
Array.from(form.elements).forEach(element => {
const patternName = element.getAttribute('data-pattern');
if (patternName && patterns[patternName]) {
element.pattern = patterns[patternName].pattern;
}
});Kullanıcı input’ta yaptığı her değişikliği veya input’tan ayrılışını yakalayalım.
// Validate every time the input changes or loses focus
form.addEventListener('input', handleInput);
form.addEventListener('blur', handleInput, true);
function handleInput(event) {
const element = event.target;
if (element.checkValidity()) {
clearError(element);
} else {
showError(element);
}
checkFormValidity();
}Doğrulama kriterlerimiz karşılanmadığında ekrana hata mesajı çıkaralım.
function showError(element) {
clearError(element);
const errorMessage = getCustomErrorMessage(element) || element.validationMessage;
const errorElement = document.createElement('div');
errorElement.className = 'error-message';
errorElement.textContent = errorMessage;
element.insertAdjacentElement('afterend', errorElement);
}Kullanıcı hatayı düzelttiğinde hata mesajlarını temizleyelim.
function clearError(element) {
const errorElement = element.nextElementSibling;
if (errorElement && errorElement.className === 'error-message') {
errorElement.remove();
}
}Hepsi bu kadar
Artık kendi elinizle, dört dörtlük çalışan bir form doğrulama mekanizması kurabiliyorsunuz. Bu yöntem ışığında, framework kullanın ya da kullanmayın kendi form-validation kütüphanenizi yazabilir, dilediğiniz gibi bakım veya özelleştirme yapabilirsiniz.
