Takip Edin

JQUERY

Jquery Form Validation Uygulaması

Jquery Form Validation - Öne Çıkan Görsel

Bu uygulamada, form doğrulama işlemi yapılacaktır. Form; email, telefon, parola ve parola tekrar input’larına sahiptir.

Bu alanlardan birini doldurmadan butona tıklamamız halinde

  • “Boş bırakılan input’un adı” alanı zorunludur!

uyarısını,

E-mail alanını doğru formatta girmeden butona tıklamamız halinde(Örneğin, abc@gmail.com yerine abc girmemiz gibi)

  • Email alanı, doğru formatta girilmedi!

uyarısını,

Telefon alanını doğru formatta girmeden butona tıklamamız halinde(Örneğin, sayısal bir ifade yerine abc girmemiz gibi)

  • Telefon alanı, doğru formatta girilmedi!

uyarısını,

Parola ve Parola Tekrar alanlarına girilen bilgilerin aynı olmaması durumunda

  • Parolalar birbiriyle eşleşmedi!

uyarısını verecektir.

$(function() {
            
            function isEmail(email) {                
                var pattern = /\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
                return pattern.test(email); // Eğer validation expression başarlı ise true, değilse false döndürecektir.
            }

            $("#btn").click(function() {
                var errormessage = "";
                $("#error").html("");

                if($("#email").val() == "") {
                    errormessage += "<p>E-mail alanı zorunludur!</p>";
                }

                if(isEmail($("#email").val()) == false) {
                    errormessage += "<p>Email alanı, doğru formatta girilmedi!</p>";
                }

                if($.isNumeric($("#phone").val()) == false) {
                    errormessage += "<p>Telefon alanı, doğru formatta girilmedi!</p>"
                }

                if($("#phone").val() == "") {
                    errormessage += "<p>Telefon alanı zorunludur!</p>";
                }

                if($("#password").val() == "") {
                    errormessage += "<p>Parola alanı zorunludur!</p>";
                }

                if($("#password").val() != $("#repassword").val()) {
                    errormessage += "<p>Parolalar birbiriyle eşleşmedi!</p>";
                }

                if(errormessage != "") {
                    $("#error").html(errormessage);
                }
            });
        });
Devamını oku

Popüler

error: Content is protected !!