JavaScript form doğrulaması. JavaScript kullanarak form tamamlamayı doğrulama

0

Sunucudaki php sayfama etki alanları arası ajax isteği yapıyorum. Sunucudaki php sayfama ajax aracılığıyla html'den bir form gönderiyorum. İstemci tarafı doğrulama ile ilgili sorunlar.

Formu göndermeden önce müşteri tarafı doğrulamasının nasıl yapıldığını bilmiyorum.

HTML formu standart form, giriş alanları yerleştirme: ad, soyadı, mesaj... HTML formum, müşteri tarafı:

var çıktı = $(".nesa"); $(document).ready(function()( $("#form1").submit(function (e) ( e.preventDefault(); $.ajax(( url: "http://www.example.com/) form.php", crossDomain: true, //etki alanları arası istekler olarak ayarlayın: "post", data: $("#form1").serialize(), beforeSend: function()( // döndürücü ekle $(" .spinner").append(" "); ), başarı: function (data) ( $(".nesa").html(data); alert("sent " + data); ), error: function()( output.text("Mesaj değil) gönderilmiş!"); ) )); )); ));

Doğrulama nasıl? Kodu sendmail'e koymaya çalışıyorum ama başarılı olamıyorum. Veya sendHandler'ı kullanmak mümkün mü?

Buradaki fikir, kullanıcı "Gönder" düğmesini tıkladığında, bu doğrulama başlar ve başarısız olursa "adresi ekle E-posta". Şimdi gönder düğmesine tıkladığımda, verileri sunucuya gönderiyorsunuz. İlk giriş alanlarının doğrulanmasını istiyorum.

Bu form, verileri sunucuya göndermenin asıl işidir, ancak yalnızca doğrulamanın nasıl yapılacağını çözmesi gerekir. Ajax çağrısında doğrulama nereye yapılır?

Sayesinde

• 5 yanıt

Sıralama:

Aktivite

0

Lütfen bir AJAX isteği göndermeden önce formu doğrulayın. Hata yoksa ajax isteği gönderilmelidir, aksi takdirde false döndürün. Şu şekilde yapabilirsiniz:

$("#form1").submit(function (e) ( e.preventDefault(); // Oturum Açma Adı değerini alın ve kırpın var name = $.trim($("#name").val()) ; // Boş olup olmadığını kontrol et if (isim === "") ( alert("Metin alanı boş."); false döndür; ) ));

Bir OnKeyUp işlevi de oluşturabilirsiniz.

0

İlk olarak, gerçekten bir AJAX formu kullanıyor musunuz?

Formu AJAX aracılığıyla yüklediğinizi açıkladınız, ancak aynı şekilde mi gönderiyorsunuz? Bana HTML kodu göndermeye çalışıyormuşsunuz gibi geldi. Formu göndermeden önce gönder düğmesinin tıklama olayına bağlanabilirsiniz. Ancak çalışma zamanında buton sayfaya eklendiğinden, Document üzerinde bir olay kaydetmeniz gerekiyor.

$(document).on("tıkla", "input", function() ( // Formu doğrula // Başarısız olursa hata mesajı ekle ve geri dön // Yoksa formu AJAX ile gönder ));

Her durumda, kullanıcı bir sonraki alana geçerken her alanı doğrulamak için bir alternatif olarak jQuery'nin blur olayını kullanabilirsiniz. Hatta kullanıcı keypress ile bir tuşa her bastığında doğrulama yapabilirsiniz.

1

Doğru/yanlış döndüren bir formu doğrulamak için bir işlev oluşturun. $.ajax'tan hemen önce işlevi çağırın. dönüşün yanlış olup olmadığını kontrol edin, sonra geri dönün .. aşağıdaki örneğe bakın...

If(!validateForm()) false döndürür;

0

Onları bir AJAX çağrısına koymadan hemen önce doğrularım. işte benim sınavım

$("#form_nieuwsbrief").bind("gönder",function()( var name = $("input").val(); var email = $("input").val(); var advance = true ; if (ad=="")( $("input").css(("kenarlık":"2px düz kırmızı")); devam et = yanlış; ) if (email=="")( $("input ").css(("border":"2px düz kırmızı")); advance = false; ) if(proceed == false)( $("#msg").append("Eğik bilgi vergeten te vullen. "); setTimeout(function()( $(".alert").fadeOut(400, function()( $(this).remove(); )) ;),10000); ) if(proceed == true) ( // ajax araması yap

Bu sadece bir isim ve e-posta adresi isteyen bir haber bültenidir. Ama prensip aynı. Ajax aramasını yapmadan önce, bir şey yanlışsa ayarladığınız değişkenle bir if else ifadesi oluşturun. aksi takdirde, devam edebilmeniz için orijinal kontrolüne sadık kalırsınız.

İki girişten (metin ve parola), bir metin alanından ve bir gönder düğmesinden (giriş gönderme) oluşan küçük bir formumuz olduğunu varsayalım. Görevimiz, formu göndermeden hemen önce ilk iki girişi ve textarea'yı boşluk açısından kontrol etmektir. Boş alan yoksa, form gönderilmelidir. Eğer boş alanlar olacak, o zaman kırmızı bir çerçeve ile daire içine alınmaları, tüm alanları doldurmanız gerektiğine dair bir uyarı şeklinde bir mesaj görüntülemeleri ve ardından formu göndermeyi yasaklamaları gerekir. Kullanıcı uyarıyı sildikten sonra, alan kenarlık rengi orijinal durumuna geri dönmelidir. Zheka Nesmelov'un sitesi, formun kendisini güzel bir şekilde tasarlamanıza yardımcı olacaktır.

Her şeyin olması gerektiği gibi çalışması için, send() işlevi tarafından döndürülen değeri formun onsubmit olayına bağlayacağız. Bu fonksiyon tüm alanların doldurulup doldurulmadığına bağlı olarak true veya false döndürür. False dönerse butona tıklandığında form gönderilmez, true ise gönderilir. Alanlara bir kimlik vermediğimizi unutmayın (bu, onları JavaScript DOM aracılığıyla almayı çok daha kolay hale getirir).

Şimdi JavaScript koduna geçelim. Burada iki işlev olacak. İlk send() işlevi asıl kontrolü yapar. Geçerli değişkenin değerine göre, kontrol bittikten sonra tüm alanların dolu olup olmadığını anlayacağız. Elemlerde, belgemizin ilk formunun (index = 0) tüm öğelerini koyarız. 0 yerine, örneğin formun adını bir dize olarak kullanabilirsiniz (ayarlanmışsa). Ayrıca, bir döngüde, bu formun tüm öğelerini gözden geçirerek, aynı anda geçerli öğenin bir textarea mı yoksa = text || türünde bir girdi mi olduğunu kontrol ederiz. şifre. Eğer öyleyse, o zaman bu elemanın değer değerini kontrol ederiz. Sonuçta değer, kullanıcı tarafından girilen metni içerecektir. değer = boş bir dize ise, öğenin sınır rengini kırmızı olarak ayarlayın ve geçerli değişkeni yanlış olarak ayarlayın. En sonunda, tüm unsurları geçtikten sonra geçerli olduğunu kontrol ediyoruz. Yanlış ise, bir uyarı görüntüler, form gönderimini devre dışı bırakır ve yalnızca doldurulmamış alanları kırmızı renkle vurgularız. Aksi takdirde, formu gönderin.

JavaScript kodundaki ikinci işlev, belge yüklendikten hemen sonra yürütülür. Fare imlecini formun üzerine getirdiğinizde (onmouseover olayı), döngü tüm öğelerini yinelemeye başlar. unsurlardan herhangi biri ise sınır CSS özelliği= "2px kesintisiz kırmızı", ardından varsayılan değere ayarlanır (kırmızı renk kaldırılır).

Bu kadar. Sadece formunuzu güzelce dekore etmek için kalır!

Bir yorum bırakın, tıklayın " Beğendim" (" Beğendim") Ve" Kaydet"Ve senin için ilginç başka bir şey yazacağım :)

Bu yazıda, daha karmaşık ve işlevsel olarak eksiksiz betiklerle ilgilenmeye başlayacağız. Görevi ayarlamaktan başlayıp kullanıma hazır evrensel bir komut dosyasıyla biten tüm aşamalardan adım adım geçelim. Formu sunucuya göndermeden önce doğrulayarak başlayalım.
Genel hususlar ve form html kodu

Form doğrulama belki de en sık kullanılan işlevlerden biridir. Nadir bir site, ister basit bir e-posta mesajı ister çevrimiçi bir mağazadaki karmaşık bir sipariş formu olsun, herhangi bir varyasyonu olmadan yapar. Komut dosyasının yararı açıktır - göndermeden önce kullanıcının tüm gerekli alanları doldurup doldurmadığını kontrol edin ve böylece boş e-posta alma veya devamsızlık sorununu önleyin iletişim bilgileri gönderen.

Halihazırda bir formumuz olduğunu ve şu 4 alandan oluştuğunu varsayalım: ad, e-posta adresi, mesajın konusu ve mesajın kendisi. Böyle bir forma karşılık gelen html kodu şuna benzer:

< form action = "/cgi-bin/formmail.cgi" onsubmit = "return sendform();" >

Adınız : *< input type = "text" name = "name" >< br >
E-posta adresi: *< input type = "text" name = "email" >< br >
Mesaj Konusu :< input type = "text" name = "subject" >< br >
İleti :< textarea name = "message" >< br >< br >

< input type = "submit" value = "Göndermek" >
< input type = "reset" value = "Temizlemek" >

* - doldurulması zorunlu alanlar

Normal bir formun aksine, onsubmit olayını doğrudan etiket üzerinde dinlediğimizi ve bu gerçekleştiğinde sendform() form doğrulama işlevini çağırdığımızı unutmayın.

İşlevi çağırmanın bu yolu neden seçildi? Ne de olsa, örneğin onclick olayını uygulamak mümkün müydü? Cevap basit - onclick olayını kullanırken, "gönder" düğmesinin değiştirilmesi gerekecek normal düğme. Ve tarayıcıda javascript desteği devre dışı bırakılırsa, formu gönderemeyeceğiz (!). Gönderme olayını izlemenin bu dezavantajı yoktur, çünkü komut dosyası desteği devre dışı bırakılsa bile form gönderilir.

Formumuzun html koduna daha yakından bakarsanız, bu alanların yanına yıldız koyduğumu ve formun sonuna dipnot koyduğumu fark edeceksiniz. Bu, elbette, rahatlık ve kullanıcıya temel saygı için yapılır.

Formu göndermeden önce doğrulama işlevi

Ve şimdi asıl konuya geçelim - formu doğrudan kontrol edecek işlevi yazmaya. Ondan neye ihtiyacımız olduğunu düşünelim mi? Peki, öncelikle gerekli alanların doldurulup doldurulmadığını kontrol edin ve ikinci olarak formu gönderin. Gerekli alanların birkaçının boş olması durumunda, kullanıcıya bununla ilgili bir mesaj oluşturmamız ve imleci ilgili öğeye taşımamız gerekir.

İlk olarak, fonksiyonun genel bağlamasını yazalım:

< script language = "javascript" >

Onsubmit olayı aracılığıyla işlevi çağırmak için kullandığımız yöntem, işlevin sonucu olarak aşağıdakilerden birinin döndürülmesini gerektirir. mantıksal değerler: doğru ya da yanlış. Ve bu değere bağlı olarak, form gönderilir veya gönderilmez.

Şimdi bu belirli forma bağlı bir doğrulama işlevi yazmaya çalışalım. Hatırlayacağınız gibi, doldurmamız gereken sadece iki alan var: ziyaretçinin adı ve e-posta adresi. En basiti, metin yokluğu için gerekli alanların her birinin içeriğini kontrol etmektir:

< script language = "javascript" >

Gördüğünüz gibi doğrulama işlevi, yalnızca doğrulanan alanın adında farklılık gösteren iki özdeş bloktan oluşur. Bu bloklardaki her satırı yorumlayalım:

Öncelikle bu alanın boş olup olmadığını kontrol ediyoruz. Ve eğer öyleyse, o zaman
Yerleşik alert() işlevini kullanarak bir hata mesajı görüntüleme. Kullanıcı pencereyi kapattıktan sonra,
odak() yöntemini kullanalım ve imleci yanlış alana taşıyalım. Ve sonunda
başarı bayrağını yanlış olarak ayarlayarak işlevden çıkın.
İşaretli alan boş değilse ilgili blok basitçe atlanır. Tüm kontrol blokları atlanırsa, işlev sonuç olarak true değerini döndürür ve bu, başarılı bir kontrolü gösterir.

Çok Yönlü Doğrulama İşlevi

Yalnızca iki veya üç alanı kontrol etmemiz gerekirse, o zaman bu "tek tek" kontrol etme yöntemine katlanabiliriz, ancak ya birkaç düzine varsa? Ancak bu, özellikle karmaşık anketlerde alışılmadık bir durum değildir. Bu nedenle, kontrol edilen alan sayısına bağlı olmaması için fonksiyonumuzu biraz değiştiriyoruz.

Öncelikle, doğrulama gerektiren tüm alanların adlarını listelediğimiz bir dizi oluşturacağız:

Gerekli = yeni dizi ("isim", "e-posta");

Bu yaklaşım, işlevin kodunu doğrudan değiştirmeden gerekli alanların listesini çok kolay bir şekilde eklememize ve değiştirmemize izin verecektir.

Yukarıdaki diziye ek olarak, belirli bir alan için hata metnini içerecek başka bir dizi ekleyeceğiz:

Required_show = new array("Adınız", "e-posta adresiniz");

Bu, hata metnini serbestçe değiştirmemize ve Rusça dilini doğru kullanmamıza ve "isim girilmemiş" gibi hazmedilemez ifadelerle yetinmemize izin verecektir.

Bir dizi gerekli alanla, tüm doğrulama bir döngüde yapılabilir. Değiştirilen doğrulama işlevi şu şekilde görünür:

< script language = "javascript" >

Döngüde, tüm form alanlarının "gerekli" ile eşleşmesi kontrol edilir. Bir eşleşme meydana gelirse, kontrol yukarıda açıklananla aynı şekilde gerçekleştirilir, ancak bir uyarı ile - hata mesajları içeren bir dizinin tanıtılması, alert () işlevinde küçük bir değişiklik yapılmasını gerektirdi, bu nedenle şimdi hata metni doğrudan şuna bağlıdır: alan adı.

Burada, genel olarak, hepsi bu. Bu işlev oldukça evrenseldir ve minimum ayarlamalarla (aslında iki dizinin içeriği) herhangi bir biçime uyarlanabilir.