JavaScript: Form Validation
Form içindeki etiketlerin doğrulama işlemleri istemci tarafında yapmamıza sağlar.
Örneğin; bir input text’e veri girildi mi? Girilen değer e-Mail mi? Girilen sayı uygun mu? vs… gibi işlemler Javascript ile yapılabilir.
Bu işlemler sunucu tarafında da yapılabilir ancak çok kullanıcının bağlandığı bir web sitesinde doğrulama sürecini istemci tarafında yapmak sunucunun yükünü hafifleteceği unutulmamalıdır.
Doğrulama işlemi iki farklı şekilde yapılabilir.
- Javascript
- HTML etiketinin özellikleri
Form Validation – Javascript
Form doğrulama işlemi normalde sunucuda, istemci gerekli tüm verileri girdikten ve ardından Gönder düğmesine bastıktan sonra gerçekleşirdi. Bir istemci tarafından girilen veriler yanlış/geçersiz yada eksikse, sunucunun tüm verileri istemciye geri göndermesi ve formun doğru bilgilerle yeniden gönderilmesini istemesi gerekir. Bu süreç, sunucuya çok fazla yük getiren gerçekten uzun bir süreçti.
JavaScript, form verilerini web sunucusuna göndermeden önce istemcinin kendi bilgisayarında doğrulama yapması için bir yol sağlar.
1 2 3 4 5 6 7 | function FormDogrulama() { let x = document.forms["Formum"]["adim"].value; if (x == "") { alert("Boş Bırakılamaz"); return false; } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <html> <head> <script> function FormDogrulama() { let x = document.forms["Formum"]["adim"].value; if (x == "") { alert("Boş Bırakılamaz"); return false; } } </script> </head> <body> <h2>JavaScript Validation</h2> <form name="Formum" onsubmit="return FormDogrulama()" method="post"> Name: <input type="text" name="adim"> <input type="submit" value="Gönder"> </form> </body> </html> |
Form Validation – HTML Özellikleri
Form verileri bir web sitesi için çok önemlidir ve doğru form verilerinin veya geçerli form verilerinin forma gönderilmesi gerekir. Form verilerinin geçerli olduğundan emin olmak veya bir giriş alanını zorunlu hale getirmek için çeşitli öznitelikler kullanılabilir. Bu doğrulama metodları tarayıcı tarafından yapılır eski nesil tarayıcıların bir çoğunda kullanılamamaktadır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <html lang="tr"> <body> <form> <label>Kullanıcı Adı:</label> <input type="text" disabled/> <label>Ad Soyad:</label> <input type="text" minlength="7" maxlength="27" required /> <label>Yaş:</label> <input type="number" min="18" max="99" required /> <label>E-mail:</label> <input type="email" required /> <label>Tel.</label> <input type="text" pattern="[0-9]{11}" required /> <button style="margin-top: 5px">Gönder</button> </form> </body> </html> |
disabled: formdaki bir giriş alanının doldurulması engellemek için kullanılır.
required: formdaki bir giriş alanının doldurulması zorunlu alanlarda kullanılır.
maxlength: formdaki bir giriş alanının maksimum karakter uzunluğunu belirtmemize yardımcı olur.
minlength: formdaki bir giriş alanının minimum karakter uzunluğunu belirtmemize yardımcı olur.
max: formdaki bir giriş alanının maksimum sayısal değerini belirtmemize yardımcı olur.
min: formdaki bir giriş alanının minimum sayısal değerini belirtmemize yardımcı olur.
pattern: formdaki bir giriş alanının bir kalıba uygunluk kontrolü yapılması için kullanılır(örn. Telefon No)
Form Validation – HTML Özellikleri JavaScript Arasında Bağlantı
1 2 3 4 5 6 7 8 9 10 11 | <input id="MyID" type="number" min="100" max="300" required> <button onclick="myFunction()">Tamam</button> <p id="MyText"></p> <script> function myFunction() { const inpObj = document.getElementById("MyID"); if (!inpObj.checkValidity()) { document.getElementById("MyText").innerHTML = inpObj.validationMessage; } } </script> |
checkValidity() : Şartlar sağlanıyorsa true değeri döndürür.
setCustomValidity() : Bir giriş öğesinin validationMessage özelliğini ayarlar.
validationMessage : Şartlar karşılanmadığında tarayıcının görüntüleyeceği mesajı içerir.
validity : Bir girdi öğesinin geçerliliğiyle ilgili boolean değeri taşır.
willValidate : Bir giriş öğesinin doğrulanıp doğrulanmayacağını gösterir.
customError : Özel bir geçerlilik mesajı ayarlanmışsa true olarak ayarlar.
patternMismatch : Bir öğenin değeri pattern özniteliğiyle eşleşmiyorsa true olarak ayar.
rangeOverflow : Bir öğenin değeri max özelliğinden büyükse true olarak ayarlar.
rangeUnderflow : Bir öğenin değeri min özelliğinden küçükse true olarak ayarlar.
stepMismatch : Bir öğenin değeri, step özelliğine göre geçersizse true olarak ayarlar.
tooLong : Bir öğenin değeri, maxLength niteliğini aşarsa, true olarak ayarlar.
typeMismatch : Bir öğenin değeri, type özniteliğine göre geçersizse true olarak ayarlar.
valueMissing : Bir öğenin (gerekli bir özniteliğe sahip) değeri yoksa, true olarak ayarlar.
valid : Bir öğenin değeri geçerliyse, true olarak ayarlar.
- 18 Mart 2022
Diğer Yazılarımız
Tüm Yazılarımız
Soru işareti kalmasın
Bu yazı hakkında aklınıza takılanlar, bir fikriniz belkide şikayetiniz vardır. Yada yazımızda hatalar olduğunu düşünüyor olabilirsiniz. Peki neden bize ulaşmayı düşünmeyesiniz ki?
Hizmetlerimiz
Binlerce müşterimizin yararlandığı 100'e yakın hizmetlerimizden sizlerde yararlanabilirsiniz. Onlarca ücretsiz web hizmeti ve profesyonel destekle sizleri daima daha ileriye taşımayı hedefliyoruz.
Tüm Yenilik ve Kampanyalardan Haberdar Ol
Son Yazılar
- CSS Grid Kullanımı Başlangıç Rehberi 1 Ocak 2025
- C# While Döngüsü Kullanımı 1 Ocak 2025
- C# ile Dosya Okuma ve Yazma İşlemleri 29 Aralık 2024