HTML5 form öğelerinin doğrulanmasını devre dışı bırak

Formlarımda, yeni HTML5 form türlerini kullanmak istiyorum, örneğin <input type="url" />( buradaki türler hakkında daha fazla bilgi ).

Sorun şu ki, Chrome süper yararlı olmak ve bu öğeleri benim için doğrulamak istiyor, ancak bunun berbat olması dışında. Yerleşik doğrulamada başarısız olursa, odaklanılan öğeden başka bir mesaj veya gösterge yoktur. URL öğelerini tercih ediyorum "http://"ve bu nedenle kendi özel doğrulamam yalnızca bu değerleri boş dizeler olarak ele alıyor, ancak Chrome bunu reddediyor. Doğrulama kurallarını değiştirebilseydim, bu da işe yarardı.

Sadece kullanmaya geri dönebilirim biliyorum type="text"ama bu yeni tür teklifleri kullanarak güzel geliştirmeler istiyorum (örneğin: otomatik olarak mobil cihazlarda özel bir klavye düzenine geçer):

Peki, otomatik doğrulamayı kapatmanın veya özelleştirmenin bir yolu var mı?

HTML5'te bir form için istemci tarafı doğrulamasını devre dışı bırakmak istiyorsanız, form öğesine bir novalidate özniteliği ekleyin. Ör:

<form method="post" action="/foo" novalidate>...</form>

Bkz. Https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novalidate

Spesifikasyonları okudum ve Chrome'da bazı testler yaptım ve "geçersiz" etkinliği yakalar ve form gönderilmesine izin veren false döndürürseniz.

Bu HTML ile jquery kullanıyorum.

// suppress "invalid" events on URL inputs
$('input[type="url"]').bind('invalid', function() {
  alert('invalid');
  return false;
});

document.forms[0].onsubmit = function () {
  alert('form submitted');
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="url" value="http://" />
  <button type="submit">Submit</button>
</form>

Bunu başka bir tarayıcıda test etmedim.

Sadece formunuzdaki novalidate özniteliğini kullanmanın yalnızca tarayıcının formu göndermesini engelleyeceğini eklemek istedim. Tarayıcı yine de verileri değerlendirir ve: geçerli ve: geçersiz sözde sınıfları ekler.

Geçerli ve geçersiz sözde sınıfları kullandığım HTML5 boilerplate stil sayfasının bir parçası olduğu için bunu öğrendim. Ben sadece sözde sınıfları ile ilgili CSS dosyasındaki girdileri kaldırdım. Birisi başka bir çözüm bulursa lütfen bana bildirin.

En iyi çözüm, bir metin girişi kullanmak ve URL klavye özelliklerini sağlamak için inputmode = "url" özniteliğini eklemektir. HTML5 spesifikasyonu bu amaçla düşünülmüştür. Type = "url" kelimesini saklarsanız, her durumda kullanışlı olmayan sözdizimi doğrulamasını alırsınız (oldukça izin verilen ve çok yardımcı olmayan sözdizimi yerine 404 hatası döndürüp döndürmediğini kontrol etmek daha iyidir).

Ayrıca daha izinli olmak için varsayılan kalıbı = "https?: //.+" özniteliğiyle geçersiz kılma seçeneğiniz de vardır.

Novalidate özniteliğini forma koymak, formdaki tüm alanların geçerliliğini kaldırdığı ve örneğin e-posta alanlarının geçerliliğini korumak isteyebileceğiniz için, sorulan soruya doğru yanıt değildir.

Doğrulamayı devre dışı bırakmak için jQuery kullanmak da kötü bir çözümdür çünkü kesinlikle JavaScript olmadan çalışması gerekir.

Benim durumumda, URL girişinden önce 2 seçenekli (http: // veya https: //) bir seçme öğesi koydum çünkü sadece web sitelerine ihtiyacım var (ve ftp: // veya başka şeyler yok). Bu şekilde bu garip öneki (Tim Berners-Lee'nin en büyük pişmanlığı ve belki de URL sözdizimi hatalarının ana kaynağı) yazmaktan kaçınırım ve yer tutucularla (HTTP olmadan) inputmode = "url" ile basit bir metin girişi kullanırım. Web sitesinin (no 404) gerçek varlığını doğrulamak ve ekli ise HTTP önekini kaldırmak için jQuery ve sunucu tarafı komut dosyası kullanıyorum (pattern = "^ ((? Http).) * $" Gibi bir desen kullanmaktan kaçınırım önek koymayı önlemek için, çünkü daha hoşgörülü olmanın daha iyi olduğunu düşünüyorum)

Tarayıcının doğrulaması etrafında bir bitiş çalışması yapmaya çalışmak yerine, http://girişi yer tutucu metin olarak koyabilirsiniz . Bu bağlantı verdiğiniz sayfadan:

Yer Tutucu Metni

HTML5'in web formlarına getirdiği ilk iyileştirme , bir giriş alanında yer tutucu metin ayarlama özelliğidir . Alan boş olduğu ve odaklanmadığı sürece yer tutucu metni giriş alanının içinde görüntülenir. Giriş alanını tıklar tıklamaz tıklamaz sekme yer tutucu metni kaybolur.

Muhtemelen daha önce yer tutucu metni görmüşsünüzdür. Örneğin, Mozilla Firefox 3.5 artık konum çubuğuna "Yer İşaretlerini ve Geçmişi Ara" yazan yer tutucu metni ekliyor:

Konum çubuğunu tıkladığınızda (veya sekme tuşuna bastığınızda), yer tutucu metni kaybolur:

İronik olarak, Firefox 3.5 kendi web formlarınıza yer tutucu metin eklemeyi desteklemez. En la vie.

Yer Tutucu Desteği

IE  FIREFOX SAFARI  CHROME  OPERA   IPHONE  ANDROID
·   3.7+    4.0+    4.0+    ·       ·       ·

Yer tutucu metnini kendi web formlarınıza nasıl ekleyebileceğiniz aşağıda açıklanmıştır:

<form>
  <input name="q" placeholder="Search Bookmarks and History">
  <input type="submit" value="Search">
</form>

placeholderÖzelliği desteklemeyen tarayıcılar basitçe yok sayar. Zarar yok, faul yok.Tarayıcınızın yer tutucu metni destekleyip desteklemediğine bakın .

Kullanıcı için bu "başlangıç ​​noktasını" sağlamadığı için tam olarak aynı olmazdı, ama en azından orada.

Çok yararlı olabilecek yerel doğrulama formunu atlamadan bu aşağıdaki seçicide CSS'li Chrome için bir çözüm buldum.

form input::-webkit-validation-bubble-message, 
form select::-webkit-validation-bubble-message,
form textarea::-webkit-validation-bubble-message {
    display:none;
} 

Bu şekilde mesajınızı özelleştirebilirsiniz ...

Bu sayfada çözüm buldum: http://trac.webkit.org/wiki/Styling%20Form%20Controls

Formunuzda novalidate kullanın .

<form name="myForm" role="form" novalidate class="form-horizontal" ng-hide="formMain">

Alkış !!!

Novalidate kullanırken bile krom ve opera'nın geçersiz giriş iletişim kutusunu göstermesini önlemek için kullandığım işlev burada.

window.submittingForm = false;
$('input[novalidate]').bind('invalid', function(e) {
    if(!window.submittingForm){
        window.submittingForm = true;
        $(e.target.form).submit();
        setTimeout(function(){window.submittingForm = false;}, 100);
    }
    e.preventDefault();
    return false;
});

bu iğrenç doğrulama kabarcıklarını bastırmak ve kendi doğrulayıcılarınızı eklemek için biraz javascript ekleyebilirsiniz.

document.addEventListener('invalid', (function(){
    return function(e) {
      //prevent the browser from showing default error bubble / hint
      e.preventDefault();
      // optionally fire off some custom validation handler
      // myValidation();
    };
})(), true);

Gibi bir form öğesi işaretlerseniz required=""o zaman novalidate=""yardım etmez.

requiredDoğrulamayı atlatmanın bir yolu , öğeyi devre dışı bırakmaktır .

Basit krom uzantısını yükleyebilir ve anında doğrulamayı devre dışı bırakabilirsiniz https://chrome.google.com/webstore/detail/html5-form-validation-err/dcpagcgkpeflhhampddilklcnjdjlmlb/related

varsayılan olarak her şey varsayılan olarak çalışır, ancak araç çubuğundaki uzantı simgesine tek bir tıklama ile html5 doğrulamasını devre dışı bırakabilirsiniz.