jQuery Academy · Ders

İstemci Tarafı Form Doğrulama Mantığı

Özel jQuery doğrulaması kullanarak gelişmiş istemci tarafı doğrulama kuralları uygulayın; kullanıcılara anında geri bildirim verin ve gönderimden önce veri bütünlüğünü sağlayın.

İstemci Tarafı Form Doğrulama Mantığı, CoddyKit'te ücretsiz bir jQuery Academy dersidir. Bu, 3 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, jQuery Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. jQuery Academy kursu toplamda 3 dersten oluşur.

Formları İstemci Tarafında Neden Doğrulamalısınız?

İstemci tarafı form doğrulaması, kullanıcı girdisini sunucuya gönderilmeden önce denetler. Bu, kullanıcı dostu web uygulamaları oluşturmanın kritik bir adımıdır.

Geliştirilmiş Kullanıcı Deneyimi: Kullanıcılar hatalarla ilgili anında geri bildirim alır ve sunucu yanıtını beklemeden hatalarını düzeltebilir.
Azaltılmış Sunucu Yükü: Geçersiz veriler erkenden yakalanır ve sunucunuz gereksiz istekleri işlemekten kurtulur.
Daha Hızlı Etkileşimler: Sayfanın yeniden yüklenmemesi, daha hızlı ve duyarlı bir form deneyimi sağlar.

Temel HTML5 Doğrulamasının Ötesinde

HTML5, required, type="email" ve pattern gibi temel doğrulama öznitelikleri sunar. Bunlar yararlı olsa da karmaşık iş kuralları veya özel geri bildirimler için genellikle yeterince esnek değildir.

Örneğin HTML5, bir parolanın belirli güç ölçütlerini karşılayıp karşılamadığını (en az 8 karakter, bir rakam ve bir sembol gibi) veya iki parola alanının eşleşip eşleşmediğini kolayca denetleyemez. jQuery tam da bu noktada devreye girer!

Form Gönderimini Yakalama

Özel doğrulamadaki ilk adım, tarayıcının varsayılan form gönderimini engellemektir. Bunun için jQuery'nin .submit() olay işleyicisini ve event.preventDefault() ifadesini kullanırız.

Bu, önce doğrulama mantığımızı çalıştırmamızı sağlar. Form geçerliyse formu daha sonra elle gönderebilir veya başka bir derste ele alacağımız AJAX aracılığıyla yollayabiliriz.

<!-- HTML part (imagine this exists) -->
<form id="myForm">
  <input type="text" id="username" required>
  <button type="submit">Submit</button>
</form>

<script>
  $(document).ready(function() {
    $('#myForm').submit(function(event) {
      // Stop the form from submitting normally
      event.preventDefault(); 
      console.log("Form submission intercepted!");
      // Here, you'd add your validation logic
    });
  });
</script>

Özel Bir Doğrulama İşlevi Yapılandırma

Doğrulama mantığınızı yeniden kullanılabilir bir işlev içinde kapsüllemek iyi bir uygulamadır. Bu işlev, form geçerliyse true, değilse false döndürebilir.

Daha sonra gönderime devam edilip edilmeyeceğine karar vermek için bu işlevi formunuzun submit olay işleyicisi içinde çağırabilirsiniz.

<!-- HTML part -->
<form id="loginForm">
  <input type="text" id="email" placeholder="Email">
  <button type="submit">Login</button>
</form>

<script>
  function validateLoginForm() {
    let isValid = true;
    const email = $('#email').val();

    if (email === '' || !email.includes('@')) {
      console.log("Invalid email!");
      isValid = false;
    }
    // More validation checks here...
    return isValid;
  }

  $(document).ready(function() {
    $('#loginForm').submit(function(event) {
      event.preventDefault();
      if (validateLoginForm()) {
        console.log("Form is valid! Submitting...");
        // $(this).off('submit').submit(); // To submit programmatically
      } else {
        console.log("Form has errors. Please fix.");
      }
    });
  });
</script>

Metin Alanı Uzunluğunu Doğrulama

Yaygın bir doğrulama kuralı, metin girdisinin en kısa veya en uzun uzunluğunu denetlemektir. Bir girdinin .val() değerini alıp .length özelliğini denetleyerek bunu kolayca yapabiliriz.

Minimum kullanıcı adı uzunluğunu 5 karakter olarak belirleyelim.

<!-- HTML part -->
<form id="userForm">
  <input type="text" id="username" placeholder="Username">
  <button type="submit">Create User</button>
</form>

<script>
  function validateUsernameLength() {
    const username = $('#username').val();
    if (username.length < 5) {
      console.log("Username must be at least 5 characters long.");
      return false;
    }
    return true;
  }

  $(document).ready(function() {
    $('#userForm').submit(function(event) {
      event.preventDefault();
      if (validateUsernameLength()) {
        console.log("Username is valid!");
      } else {
        console.log("Validation failed.");
      }
    });
  });
</script>

Kullanıcıya Anında Geri Bildirim Sağlama

Hataları yalnızca konsola kaydetmek kullanıcılar için yeterli değildir! Açık ve anında geri bildirimi doğrudan sayfada göstermemiz gerekir. Alanların yanına hata mesajları ekleyebilir veya geçersiz girdileri vurgulayabilirsiniz.

Kullanıcı adı çok kısa olduğunda bir hata mesajı göstermek için bir <span> öğesi ekleyeceğiz.

<!-- HTML part -->
<form id="userFormFeedback">
  <label for="usernameFeedback">Username:</label>
  <input type="text" id="usernameFeedback" placeholder="Min 5 chars">
  <span id="usernameError" style="color: red;"></span>
  <button type="submit">Create User</button>
</form>

<script>
  $(document).ready(function() {
    $('#userFormFeedback').submit(function(event) {
      event.preventDefault();
      const username = $('#usernameFeedback').val();
      const $errorSpan = $('#usernameError');

      if (username.length < 5) {
        $errorSpan.text("Username too short!");
        $('#usernameFeedback').css('border', '1px solid red');
      } else {
        $errorSpan.text("");
        $('#usernameFeedback').css('border', '');
        console.log("Username is valid!");
      }
    });
  });
</script>

E-postayı Düzenli İfadelerle Doğrulama

E-posta biçimleri gibi karmaşık örüntü eşleştirmelerinde düzenli ifadeler (regex) çok değerlidir. JavaScript'in RegExp.test() yöntemi bunun için idealdir.

Temel bir e-posta regex'i karakterleri, bir '@' sembolünü ve bir etki alanını denetleyebilir. Çok katı e-posta regex'lerinin aşırı karmaşık olabileceğini unutmayın; bu nedenle bir denge kurmaya çalışın.

<!-- HTML part -->
<form id="emailForm">
  <label for="userEmail">Email:</label>
  <input type="text" id="userEmail" placeholder="your@example.com">
  <span id="emailError" style="color: red;"></span>
  <button type="submit">Subscribe</button>
</form>

<script>
  $(document).ready(function() {
    $('#emailForm').submit(function(event) {
      event.preventDefault();
      const email = $('#userEmail').val();
      const $errorSpan = $('#emailError');
      // Basic email regex: something@something.something
      const emailRegex = /^[\w.-]+@[\w.-]+\.[a-zA-Z]{2,6}$/;

      if (!emailRegex.test(email)) {
        $errorSpan.text("Invalid email format.");
        $('#userEmail').css('border', '1px solid red');
      } else {
        $errorSpan.text("");
        $('#userEmail').css('border', '');
        console.log("Email is valid!");
      }
    });
  });
</script>

Sayısal Aralık Doğrulaması

Bazen bir sayının belirli bir aralık içinde olduğundan emin olmanız gerekir (örneğin yaşın 18 ile 65 arasında, miktarın 1 ile 100 arasında olması). Girdi değerini bir sayıya dönüştürüp basit karşılaştırmalar yapabiliriz.

Sayısal karşılaştırmalardan önce dize girdisini parseInt() veya parseFloat() kullanarak bir sayıya dönüştürmeyi her zaman unutmayın.

<!-- HTML part -->
<form id="ageForm">
  <label for="userAge">Your Age:</label>
  <input type="number" id="userAge" placeholder="Enter age">
  <span id="ageError" style="color: red;"></span>
  <button type="submit">Submit Age</button>
</form>

<script>
  $(document).ready(function() {
    $('#ageForm').submit(function(event) {
      event.preventDefault();
      const ageInput = $('#userAge').val();
      const age = parseInt(ageInput, 10); // Convert to integer
      const $errorSpan = $('#ageError');

      if (isNaN(age) || age < 18 || age > 65) {
        $errorSpan.text("Age must be between 18 and 65.");
        $('#userAge').css('border', '1px solid red');
      } else {
        $errorSpan.text("");
        $('#userAge').css('border', '');
        console.log("Age is valid!");
      }
    });
  });
</script>

Birden Çok Doğrulama Kuralını Birleştirme

Formlar genellikle tek bir alan veya birden çok alan için birden fazla doğrulama kuralı gerektirir. Bu denetimleri doğrulama işleviniz içinde zincirleyebilirsiniz.

Yaygın bir yaklaşım, geçerliliği varsaymak ve herhangi bir kural başarısız olursa isValid = false atamaktır. Böylece kullanıcıya göstermeden önce tüm hataları biriktirebilirsiniz.

Ayrı doğrulama yardımcı işlevlerini çağırın.
Sonuçları bir boole bayrağında saklayın.
İlgili tüm hata mesajlarını görüntüleyin.

Doğrulama Becerilerinizi Test Edin

İki kuralı karşılaması gereken bir 'Ürün Kodu' form alanını düşünün:

Tam olarak 6 karakter uzunluğunda olmalıdır.
Yalnızca büyük harfler ve rakamlar (A-Z, 0-9) içermelidir.

'productCode' girdi alanını doğru biçimde doğrulayan ve bir hata mesajı gösteren jQuery kod parçacığı hangisidir?

Özet: İstemci Tarafı Doğrulaması

Bu derste jQuery kullanarak sağlam istemci tarafı form doğrulamasının nasıl uygulanacağını öğrendiniz. Şunları ele aldık:

Kullanıcı deneyimi ve performans açısından istemci tarafı doğrulamanın önemi.
event.preventDefault() ile form gönderimlerini yakalama.
Özel doğrulama işlevlerini yapılandırma.
Metin uzunluğu, e-posta örüntüleri (regex) ve sayısal aralıklar için kurallar uygulama.
Kullanıcılara açık ve anında geri bildirim sağlama.

Bu tekniklerde ustalaşmak, daha etkileşimli ve hatalara daha dayanıklı formlar oluşturmanıza yardımcı olacaktır!

Sıkça Sorulan Sorular

“İstemci Tarafı Form Doğrulama Mantığı” dersi ücretsiz mi?

Evet — “İstemci Tarafı Form Doğrulama Mantığı” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve jQuery Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. jQuery Academy kursu toplamda 3 dersten oluşur.

“İstemci Tarafı Form Doğrulama Mantığı” dersinde ne öğreneceğim?

Özel jQuery doğrulaması kullanarak gelişmiş istemci tarafı doğrulama kuralları uygulayın; kullanıcılara anında geri bildirim verin ve gönderimden önce veri bütünlüğünü sağlayın. jQuery Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

jQuery Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te jQuery Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 2. dersidir.

“İstemci Tarafı Form Doğrulama Mantığı” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu jQuery Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her jQuery Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← jQuery Academy Sayfasına Dön