Gerekli öznitelik HTML5

81

Web uygulamamda, form alanlarım için bazı özel doğrulama kullanıyorum. Aynı form içinde iki düğmem var: biri formu gerçekten göndermek ve diğeri formu iptal etmek / sıfırlamak için.

Çoğunlukla Safari'yi varsayılan tarayıcım olarak kullanıyorum. Şimdi Safari 5 çıktı ve aniden iptal / sıfırla düğmem artık çalışmadı. Sıfırla düğmesine her bastığımda, formumdaki ilk alan odak noktası aldı. Ancak bu, özel form doğrulamamla aynı davranıştır. Başka bir tarayıcıyla denerken her şey yolunda gitti. Safari 5 problemi olmalıydım.

Javascript kodumda biraz değişiklik yaptım ve aşağıdaki satırın soruna neden olduğunu öğrendim:

document.getElementById("somefield").required = true;

Bir test senaryosu oluşturduğum sorunun gerçekten bu olduğundan emin olmak için:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>

<body>
    <form id="someform">
        <label>Name:</label>&nbsp;<input type="text" id="name" required="true" /><br/>
        <label>Car:</label>&nbsp;<input type="text" id="car" required="true" /><br/>
        <br/>
        <input type="submit" id="btnsubmit" value="Submit!" />
    </form>
</body>
</html>

Olmasını beklediğim şey oldu. İlk alan "adı" otomatik olarak odağı aldı.

Buna rastlayan başka kimse var mı?

html

— Joop
kaynak

2

Artık gerekli özniteliği true olarak ayarlamanıza gerek yok. Örneğin: <input type = "text" id = "name" required = "true" /> ve <input type = "text" id = "name" gerekli /> aynı

— RSK

Doğru, XHTML'de kodlamaya alışkın olduğumda bu benim için kötü bir alışkanlık ... Ama tüm modern tarayıcılar bu etiketi = "gerekli" olmadan destekliyor mu? Safari'nin olmadığına inanıyorum ...

— Loic Cara

Gerçek ve beklenen davranış nedir?

— Ciro Santilli 郝海东冠状病六四事件法轮功

blog.grayghostvisuals.com/html/using-html-required-attribute'a göre "Eğer öznitelik mevcutsa, değeri ya boş dize ya da özniteliğin kanonik adıyla büyük / küçük harfe duyarlı olmayan bir değer olmalıdır. baştaki veya sondaki boşluk. " "boole" özellikleri için, bu nedenle gerekli = "true" yerine gerekli = "gerekli" veya sadece gerekli olmalıdır

— George Birbilis

49

Safari 5 ile bu sorunla karşılaştım ve bir süredir Opera 10 ile ilgili bir sorun oldu, ancak düzeltmek için hiç zaman harcamadım. Şimdi düzeltmem ve gönderinizi görmem gerekiyor, ancak formun nasıl iptal edileceğine dair henüz bir çözüm yok. Çok fazla araştırmadan sonra sonunda bir şey buldum:

http://www.w3.org/TR/html5/forms.html#attr-fs-formnovalidate

<input type=submit formnovalidate name=cancel value="Cancel">

Safari 5 ve Opera 10'da çalışır.

— Darrik Spaude
kaynak

8

novalidateTüm form için bunu yapmak için form etiketinde de kullanabilirsiniz .

— Michael Mior

Bu özelliği mevcut sekmedeki tüm formlara ekleyen küçük bir Chrome uzantısı paketledim, ipucu için teşekkürler! chrome.google.com/webstore/detail/html5-form-validation-rem/…

— Damien

Benim durumumda için önemliydi, formnovalidatedüğme tipi ile çalışır çok teslim: <button type="submit" formnovalidate>Submit</button>.

— Mayeenul Islam

256

Bunu not et

<input type="text" id="car" required="true" />

yanlış, biri olmalı

<input type="text" id="car" required />
<input type="text" id="car" required="" />
<input type="text" id="car" required='' />
<input type="text" id="car" required=required />
<input type="text" id="car" required="required" />
<input type="text" id="car" required='required' />

Bunun nedeni, truedeğerin, falsedeğerin form denetimini isteğe bağlı hale getireceğini önermesidir , bu durum böyle değildir.

— Ms2ger
kaynak

7

Bu cevap doğru, ancak bence burada sahip olduğumuz sorun bu değil.

— PhoneixS

bu güvenli mi? ... Yani bunu kullanmalı mıyım yoksa sadece javascript doğrulamasına bağlı mıyım? güvenli derken demek istediğim, bu çözüm farklı tarayıcılarda / cihazlarda anormallikler üretiyor mu ...

— kebyang

8

Orijinal kodun "yanlış" olmadığını belirtmek isterim, bu sadece falsebir alanı isteğe bağlı (gerekli değil) yapmak için kullanabileceğinizi ima eder - bu durum böyle değildir. Anlamanız gereken şey, requiredniteliğin varlığının alanı gerekli kılmasıdır. Alanı isteğe bağlı yapmanın tek yolu, niteliği kaldırmaktır. Ve SUNUCU TARAFINDAN DOĞRULAMA GERÇEKTEN ÖNEMLİDİR (çığlık attığım için özür dilerim).

— Ryan Wheale

@RyanWheale Bence müşteri tarafı doğrulaması (kendi başına yetersiz olsa da) gerçekten önemli

— jinglesthula

1

@jinglesthula - İstemci tarafı doğrulama, kullanıcı için bir kolaylıktan başka bir şey değildir (sunucuya gidiş-dönüşleri kaydederek daha iyi UX sağlar). Önceki bir yorumu ele alıyordum "[tarayıcılarda] kullanmak bu kadar güvenli mi" - ve yanıt şu ki, sunucu tarafı doğrulamanız çalıştığı sürece gerçekten önemli değil (ör. Eski tarayıcı HTML5 biçimini tanımıyor doğrulama ve boş değer içeren "zorunlu" bir alan gönderir).

— Ryan Wheale

19

Sorunuzu doğru anlarsam, requiredözniteliğin Safari'de varsayılan davranışa sahip gibi görünmesi kafanızı karıştırıyor mu? Öyleyse, bkz: http://w3c.github.io/html/sec-forms.html#the-required-attribute

required HTML 5'te özel bir öznitelik değildir. Spesifikasyonda tanımlanmıştır ve tam olarak şu anda kullandığınız şekilde kullanılır.

DÜZENLEME : Pekala, tam olarak değil . Ms2ger'ın belirttiği gibi, requiredöznitelik bir boole özniteliğidir ve işte HTML 5 spesifikasyonunun bunlar hakkında söyleyecekleri:

Not: Boole özelliklerinde "true" ve "false" değerlerine izin verilmez. Yanlış bir değeri temsil etmek için, özniteliğin tamamen çıkarılması gerekir.

Bkz: http://w3c.github.io/html/infrastructure.html#sec-boolean-attributes

— David Foster
kaynak

2

İşte bu yüzden standart nesneler üzerinde özel öznitelikler veya özellikler oluşturmamalıyız.

— Quentin

Belirli bir sayfa için Chrome ve Safari için bunu nasıl kapatacağınıza dair bir fikriniz var mı?

— Restuta

@Restuta Chrome'da bunu devre dışı bırakmak için: bayraklar'a gidin. Firefox, emin değilim.

— therealklanni

8

Safari 7.0.5, giriş alanlarının doğrulanması için bildirimi hala desteklemiyor.

Bunun üstesinden gelmek için şu şekilde yedek komut dosyası yazmak mümkündür: http://codepen.io/ashblue/pen/KyvmA

Tarayıcılar tarafından hangi HTML5 / CSS3 özelliklerinin desteklendiğini görmek için şu adrese bakın: http://caniuse.com/form-validation

function hasHtml5Validation () {
  //Check if validation supported && not safari
  return (typeof document.createElement('input').checkValidity === 'function') && 
    !(navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0);
}

$('form').submit(function(){
    if(!hasHtml5Validation())
    {
        var isValid = true;
        var $inputs = $(this).find('[required]');
        $inputs.each(function(){
            var $input = $(this);
            $input.removeClass('invalid');
            if(!$.trim($input.val()).length)
            {
                isValid = false;
                $input.addClass('invalid');                 
            }
        });
        if(!isValid)
        {
            return false;
        }
    }
});

SASS / DAHA AZ:

input, select, textarea {
    @include appearance(none);
    border-radius: 0px;

    &.invalid {
        border-color: red !important;
    }
}

— Urtalıları değerlendirir
kaynak

Teşekkür ederim. Bu bana çok yardımcı oldu.

— theGreenCabbage

Bu düz CSS mi yoksa Daha Az mı?

— James A Mohler

Hayatım boyunca, gerekli olarak işaretlenen girişler çalışmadığında ve bu Soru-Cevap oturumunu bulduğunda hala ateşlenen bir iPod touch'ım var. Bu cevap benim için işe yarayan tek cevaptı. Bunu paylaşacağımı düşündüm.

— Funk Forty Niner

7

Özel özniteliklerle ilgili küçük bir not: HTML5, her türden özel özniteliğe, parçacığın önüne data-, yani data-my-attribute="true".

— Ludder
kaynak

1

Ve bunlar eski tarayıcılarda gayet iyi çalışıyor (ancak değerlerine erişmek için yeni API yerine kendi kodunuza ihtiyacınız olacak), bu nedenle kendi özniteliklerinizi oluşturmaktan daha iyi bir seçimdir (çünkü hiçbiriyle çakışmazlar) gelecekte eklenen resmi özellikler).

— Paul D. Waite

1

Aslında, özel öznitelikler kelimenin tam anlamıyla her şey olabilir. element.datasetBununla birlikte, nesnede "data-" ön ekine sahip olanlar ve diğer avantajların yanı sıra (örneğin, jQuery, .data()yöntemi kullanarak herhangi bir "veri" önekli özel özniteliğin değerini otomatik olarak yakalayabilecektir , yani .data("myAttribute")= değeri data-my-attribute). Daha kısa özel özniteliklerin kullanılması bazen özel CSS3 seçicileri yapmak için yararlı olabilir.

— therealklanni

3

Tamam. Aynı zamanda sorumu yazarken, meslektaşlarımdan biri bunun aslında HTML5 davranışı olduğunu fark etmemi sağladı. Bkz http://dev.w3.org/html5/spec/Overview.html#the-required-attribute

HTML5'te yeni bir "gerekli" özniteliği var gibi görünüyor. Ve Safari 5'te bu özellik için zaten bir uygulama var.

— Joop
kaynak

Kahretsin, aynı cevabı gönderdikten birkaç saniye sonra kendi sorunuzu cevapladınız!

— David Foster

Meslektaşlarımdan birine gerçekten teşekkürler. Bu başkaları için ilginç olabilir sanırım?

— Joop

Kesinlikle! Formun ön tarafında son HTML5 spesifikasyonunun neler sunacağını görmek beni heyecanlandırıyor.

— David Foster

2

Aşağıdakileri formunuzun altına yazmanız yeterlidir. Giriş alanlarınızın olduğundan emin olun required.

<script>
    var forms = document.getElementsByTagName('form');
    for (var i = 0; i < forms.length; i++) {
        forms[i].noValidate = true;
        forms[i].addEventListener('submit', function(event) {
            if (!event.target.checkValidity()) {
                event.preventDefault();
                alert("Please complete all fields and accept the terms.");
            }
        }, false);
    }
</script>

— duygusallık
kaynak