HTML5 doğrulama kullanıldığında gönderme etkinliğine nasıl bağlanır? HTML5 tarayıcılarda

HTML5 doğrulama kullanma

...HTML5 doğrulama kullanıldığında gönderme etkinliğine nasıl bağlanır? HTML5 tarayıcılarda

, doğrulama önce submit etkinliği oluşturulur. Bu nedenle, form geçersizse, gönderim etkinliği asla tetiklenmez.

Formu doğrulayıp onaylamamaya itiraz etmek için, form gönderimine bir olay eklemek istiyorum. Kullanıcı formu gönderdiğinde, alert()'a çalıştığım küçük bir örnek.

HTML:

<!DOCTYPE html> 
<html> 
    <head><title>Example</title></head> 
    <body> 
     <form> 
      <input type="text" name="foo" required title="Foo field"/> 
      <input type="submit"/> 
     </form> 
    </body> 
</html>

JavaScript:

$(function() { 
    $('form').submit(function() { 
     alert('submit!') 
    }); 
});

Etkileşimli demo: http://jsfiddle.net/gCBbR/

Sorum şu: tarayıcılar daha önce aday olacağını bağlanabilen bir alternatif olayı sağlıyoruz doğrulama?

kaynak

2011-09-28 Portman

Evet, bu sebeple bir olay yoktur kalıcı taşıma kullanımı için, yalnızca bir kez çalıştırılacaktır. Kullanıcı, checkValidity() numaralı HTML5 doğrulama yöntemiyle geçerliliği kontrol ettiğinizde orr için göndermeye çalıştığında etkinlik invalid olarak adlandırılır. Bu etkinlik, input etiketlerinizde HTML doğrulama özelliklerine sahip olmanız nedeniyle checkValidity() numaralı telefonu aramadan blur veya benzeri bir şeyle çalışmaz. Ancak form göndermeden önce yanar. eleman kısıt doğrulama için bir adaydır ve sıkıntıları giderecek etmezse

checkValidity() yöntemi çağrıldığında, kullanıcı aracısı invalid adında basit bir olay yangın gerekir: W3C itibaren

Bu, öğesinde iptal edilebilir (ancak bu durumda varsayılan eylemi yoktur) ve false değerini döndürür. Aksi halde, yalnızca hiçbir şey yapmadan doğru olarak dönmelidir. Eğer input veri geçersiz ise invalid olay yangın checkValidity() çağırmanız gerekir Sonra
<form> 
      <input type="text" name="foo" required title="Foo field"/> 
      <input type="submit"/> 
</form> 
: Örneğin

bu işaretlemeyi var

burada örneğe

document.querySelectorAll('input')[0].addEventListener('blur', function(){ 
     this.checkValidity(); 
    }, false); 

document.querySelectorAll('input')[0].addEventListener('invalid', function(){ 
     console.log('invalid fired'); 
    }, false);

Görünüş: Tarayıcıyı varsayılan va'yi kullanmak istiyorsanız, http://jsbin.com/eluwir/2

kaynak

2011-09-28 18:29:12 Mohsen

Aslında bu tamamen doğru değil.Geçersiz olay programatik kısıtlama validasyonu (checkValidity) * ve * interaktif form validasyonu (geçersiz girişlere sahip bir form göndermek için kullanıcı trys) ile tetiklenir. Ayrıca, diğer iki büyük fark var, geçersiz her geçersiz giriş için kovulur ve sadece bir kez gönderilir + geçersiz etkinlik formun içine girmez (yakalamayı kullanabilirsiniz ...). –

@alexanderfarkas, tamamen haklısınız. Spesifikasyonu yanlış anladım. Cevabımı düzenledim. Bu etkinlik şu adrese göndermeden önce tetikleniyor: http://jsbin.com/eluwir/3/edit – Mohsen

-1

$(function() { 
    $('form').one('submit',function() { 
     alert(1); 

     [...] 

     $(this).submit(); // optional 
     return false; // returning false skips validator's trigger 
    }); 
});

bu kod $.bind

kaynak

2011-09-28 18:15:48 bazilio

Sana soru yanlış anladı kullanmak gönderirim varsayılan bağlamak gerekiyor olarak lidation aşağıdaki kullanmalıdır. Form HTML5 doğrulaması başarısız olursa gönder olayı hiç bir zaman tetiklenmez. – Portman

-2

Sonra bunu önlemek ve $ .ajax veya $ .post

$("form").bind('submit', function(e){ 
     e.preventDefault(); 

     $.post("url",$("form").serialize(),function(data){ 
          $("#result").html(data).show(); 
           }); 
     });

kaynak

2012-10-30 08:47:59 Bakly

HTML5 doğrulama kullanıldığında gönderme etkinliğine nasıl bağlanır? HTML5 tarayıcılarda

cevap

İlgili konular