HTML5'te gizli form kontrolleri ele alınıyor mu?

Question

HTML5, JavaScript kullanmak zorunda kalmadan formlarda istemci tarafında doğrulamayı daha iyi tanımlayabilme özelliğine ekledi. Konsept "maxlength" ve "minlength" gibi özelliklerle zaten mevcuttu. "Gerekli" ve "desen" gibi özelliklerle genişletildi. Bununla birlikte, HTML5, bu özelliklerdeki sınırlamaları da tanımlamıştır ve WebKit tarayıcıları bu kısıtlamaları uygulamıştır (muhtemelen Firefox ve Opera'nın çok gerisinde değil).

restrictions in question, display: none veya visibility: hidden CSS kurallarını kullanarak CSS/JavaScript tarafından gizlendiğinde form kontrolünün görünürlüğü ile ilgilidir. kısıtlamalar gibi tanımlanmıştır: Bir input elemanın tip özelliği Gizli durumundayken

4.10.7.1.1 Gizli durum

[...] input elemanı olmayan bir değeri temsil eder Kullanıcı tarafından incelenmek veya manipüle edilmek üzere tasarlanmıştır.

• value IDL özellik [Ayrıca]

  bu eleman için geçerlidir ve mod varsayılan bulunmaktadır.

• aşağıdaki içerik nitelikleri belirtilen edilmemelidir ve eleman için geçerli değildir: accept, alt, autocomplete, checked, dirname, formaction, , formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, multiplepattern, placeholder, readonly, required, size, src, step ve width.
• şu IDL nitelikleri ve yöntemler eleman için geçerli değildir: checked, files, list, selectedOption, selectionStart, selectionEnd, selectionDirection, valueAsDate ve valueAsNumber IDL nitelikleri; select(), setSelectionRange(), stepDown() ve stepUp() yöntemleri.
• input ve change olayları geçerli değildir. İlk bakışta

, o doğrulama formda kullanıcı kontrolü üzerinde üzerinde sahip olduğu kontrol yapılması gerekmez söylemek mantıklı. Ve formun varsayılan form kontrol öğelerini kullanarak oluşturduğu için, bunlar mantıklıdır. Ama şimdi, uzak form kontrolleri oluştururken bir sorun ortaya çıktı.

Ne HTML5 ne de CSS3 (büyük tarayıcılar) form denetimlerini biçimlendirmeyi çok daha kolaylaştırmıştır. <select> öğeleri, stil açısından büyük ölçüde kısıtlanmıştır ve <input> ve <button> öğeleri, rahatsız edici biçimde farklı stil kurallarına (ve IE dışındaki tarayıcılar için, imkansız CSS tarayıcı hedeflemesine yakın) sahiptir. Bu nedenle, tasarımcılarım "güzel" form kontrolleri istediğinde, HTML, CSS ve JavaScript kullanarak yeniden oluşturulmaları gerekebilir. Simüle edilmiş kontrol, CSS tarafından gizlenen gerçek kontrolü uzaktan kontrol edecektir.Bu benim için <select>, <input type="checkbox"> ve <input type="radio"> öğeleri için geçerlidir, hepsi WebTit tarayıcılarda required özniteliği verildiğinde bir soruna neden olur.

HTML5 özellikleri, gizli form denetimlerinde required gibi belirli özniteliklerin bulunamayacağını bildirdiğinden, tarayıcıların geçersiz özniteliklere yanıt vermesi gerekir. WebKit tarayıcıları, formun hiç gönderilmemesiyle yanıt verir (ve JavaScript'in submit olayını tetiklemez). Şu anda <select> öğesi ile hataya koşuyorum.

Krom konsola bu hata ile başarısız: name = 'eleman-name' ile

Geçersiz form denetimi odaklanabilir değildir.

---

Yani, beni alakadar listedeki bir öğeyi seçin:

Safari mesajla penceresinin alt gri bir çubuk göstererek başarısız HTML5'in çok kısıtlı olup olmadığını mı yoksa bu soruna yanlış bir şekilde yaklaşıyorum. Ya:

1. HTML5'in özellikleri kusurludur ve başka bir çözüm olmadan ek bir kısıtlama ekler. HTML5, bir form denetimi görünmüyorsa, kullanıcının bununla etkileşimde bulunmaması gerektiğini varsayar. Bu, geliştiricilerin, orijinal form denetimi gizli kalırken, uzaktan kontrol ettiğimiz öğeler için HTML5'in doğrulama özniteliklerini kullanmasını engeller. Özel denetimlerimizi yalnızca CSS kullanarak oluşturma yeteneğine hala sahip değiliz;
2. Uzak form denetimlerini yanlış kullanıyorum. çok iyi tanımlanmış bir sorunu çözmek için "eski" bir teknik kullanıyorum olarak, benim yaklaşımım modası geçmiş olabilir. WebKit şu anda bu kısıtlamayı ele alan tek kişi olduğu için, WebKit'in henüz bulamadığım bir çözümü var. Dinamik JavaScript, bir form denetimi gizlemek zaman
   • kısıtlı özelliklerini çıkarmak için

şu anda düşünebildiğim tek geçici çözümler Ben, HTML5 doğrulamasını feda demek ki vardır

submit olayı hiç tetiklenmediğinden ve gönderim düğmesinde click olayını tetiklemeden bir form göndermek veya

Yine de HTML5 doğrulamasını kaybedersem novalidate özniteliğini kullanın.

Doğru şekilde mi bakıyorsunuz yoksa bir şey mi özlüyorum?

P.S. Uzunluk için üzgünüm. Aradan sonra her şey benim "tl; dr".

Answer 1

İlk önce iki şeyi karıştırın. HTML5 özelliği gizli durum belirtirse, bu özellik yalnızca "gizli" değerine ayarlanmış bir tür özniteliğine sahip bir giriş öğesi anlamına gelir. Bu durumda, giriş doğrulanmaz, yani giriş geçersiz olamaz. Ve tarayıcı form teslimini iptal etmez.

Sorununuz bir diğeri. Yalnızca görsel olarak gizli olan (gösterme: none) ve başka bir öğe (veya başka öğeler kümesi) ile değiştirilen gerçek bir geçersiz öğeniz var. Durumunuzda sorun şu şekildedir: Etkileşimli form doğrulaması durumunda, tarayıcı ilk geçersiz öğeyi odaklamalı ve en azından bu öğe için bir doğrulama mesajı göstermelidir. Sorun şu ki, bir tarayıcı gizli bir öğeye odaklanamaz veya bu öğenin altında bir doğrulama mesajı gösteremez. Bu, tarayıcının form gönderimini durdurduğu, ancak doğrulama sorunlarını göstermek için tek kullanıcı arayüzüne sahip olduğu anlamına gelir.

Şimdi sizin için: Bu mantıklı mı? Evet öyle! Bir form öğesinin UI'sini değiştirirseniz, doğrulama mesajı için UI'yi de uygulamanız gerekir. (Bir şeyi özelleştirmek isterseniz, kullanmak istediğiniz her şeyi özelleştirdiniz). HTML5, tam olarak bunu elde etmek için bir API verir.

Sen, seçme elemanının geçersiz olayı bağlamak (ilk geçersiz formun olay ise) basıp elemanı tarz için kendi doğrulama ipucu yerleştirmek varsayılan eylemi önlemek zorundayız. Benim HTML5 formu Polyfill (webshims lib) olarak

, ben zaten başka bir unsur sadece doğrulama ipuçları üreten + ile (API ile) bir yerli eleman bağlayacak kodu kullanıyorum.

Basit bir jsfiddle oluşturdum; bu, bir seçim yerine taklit eden taklit eder ve özel form denetimleriyle HTML5 form doğrulamasının nasıl gerçekleştirileceğini gösterir. example here'u bulabilirsiniz.