JavaScript Notları VIII — Form Validasyonu

https://unsplash.com/photos/j0VL_haSyhM

121 — Form Validasyonu nedir?

Form validasyonu bir formdaki alanların gereksinim duyulan şekilde doldurulup doldurulmadığını kontrol eder.

Eğer kullanıcı tarafından girilen veri formata uygun değilse, bir hata mesajı kullanıcının karşısına çıkacaktır.

Formlar, kullanıcı-tarafı (client-side) ya da sunucu-tarafı (server-side) validasyonlar ile onaylanabilirler.

Sunucu-tarafı (server-side) validasyonları daha güvenlidir ve onaylamak için sunucu bağlantısına ihtiyaç duymaktadır. Kullanıcı-tarafı (client-side) validasyonları ise daha çabuktur ve server bağlantısına ihtiyaç duymaz.

JavaScript, Kullanıcı-tarafı (client-side) validasyonları için kullanılır. Kullanıcı-tarafı (client-side) validasyonları zaman kazandırır, sunucu yükünü azaltır ve form elemanını daha gönderilmeden valide edebilir.

122 — Required Attribute (gereken özellik) nedir?

Bir HTML elemanının boş (blank) olarak girilmesini engeller.

Örnek:

<input type=”text” name=”employeename” required>

Yukarıdaki durumda “employeename” kısmı doldurulana dek onaylanma engellenecektir.

123 — Pattern Attribute nedir?

Pattern Attribute, bir düzenli ifade (regular expression) kontrolünü ifade eder. Eğer elemanın değeri, regex desenine karşılık gelmiyorsa onaylanma engellenecektir.

Örneğin:

<input type=”text” name=”employeename” pattern=”[A-Za-z]”>

Yukarıdaki durumda “employeename” kısmı, alfabenin harflerinden oluşmuyorsa form onaylanmayacaktır.

124 — Javascript fonksiyonu ile validasyon:

Aşağıdaki örnekte Javascript fonksiyonu ile validasyon gösterilmiştir:

<script>
function validateName() {
​ var name = document.nameform.name.value;
​ if(name==undefined || name==””) {
​ ​ alert(“Kindly enter the name!!!”);
​ ​ return false;
​ }
​ Return true;
}
</script>
<form name=”nameform” method=”post” onsubmit=”return validateform()”>
Name: <input type=”text” name=”name”>
<input type=”submit” name=”save”>
</form>

125 — Form içerisinde e-mail onaylama:

function validateEmail(emailField){
var reg = /^([A-Za-z0–9_\-\.])+\@([A-Za-z0–9_\-\.])+\.([A-Za-z]{2,4})$/;
if (reg.test(emailField.value) == false)
{
alert(‘Invalid Email Address’);
return false;
}
return true;
}

126 — Formu göndermeden alanı valide etmek:

<input type=”text” onblur=”validateEmail(this);” />

127 — “.test” metodu nedir?

.test() API, regex ile string arasında bir karşılığı arar.

.test() API, Boolean(true/false) bir değeri geri döner. Eğer test geçerse true geçmez ise false olarak geri döner.

128 — “.match” metodu nedir?

“.match” metodu, veriyi test sonucu olarak beklerken kullanılır. “.match”, karşılığıyla birlikte bir “array” olarak geri döner ve ya bir karşılık yoksa “null” olarak geri döner.

“.match” ile hem verinin varlığını kontrol etmiş hem de veri deseninin olup olmadığını test etmiş olursunuz.

129 — Tarihi valide etmek:

function validateDate(dateField) {
var reg = /^([0–9]{2})\/([0–9]{2})\/([0–9]{4})$/
if (reg.test(dateField.value) == false) {
alert(“Invalid Date!!!”);
return false;
}
return true;
}

130 — Girdi alanında sadece sayıya izin vermek:

function validateNumber(numField) {
var reg = /^[0–9]+$/
if (reg.test(numField.value) == false) {
alert(“Invalid Number!!!”);
return false;
}
return true;
}

Data Validation - How to Check User Input on HTML Forms with Example JavaScript Code

Client-side form validation

JavaScript Form Validation