Wymagany atrybut HTML5

81

W mojej aplikacji internetowej używam niestandardowej weryfikacji dla moich pól formularza. W tym samym formularzu mam dwa przyciski: jeden do faktycznego wysłania formularza, a drugi do anulowania / resetowania formularza.

Przeważnie używam Safari jako domyślnej przeglądarki. Teraz Safari 5 jest wyłączone i nagle mój przycisk anulowania / resetowania przestał działać. Za każdym razem, gdy naciskałem przycisk resetowania, pierwsze pole w moim formularzu było aktywne. Jest to jednak to samo zachowanie, co w przypadku walidacji mojego formularza niestandardowego. Podczas próby z inną przeglądarką wszystko działało dobrze. Musiałem mieć problem z Safari 5.

Zmieniłem nieco kod JavaScript i okazało się, że problem powoduje następujący wiersz:

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

Aby mieć pewność, że to naprawdę będzie problem, stworzyłem scenariusz testowy:

<!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>

Stało się to, czego się spodziewałem. Pierwsze pole „name” zostało automatycznie wyróżnione.

Ktoś jeszcze się w to natknął?

html

— Joop
źródło

2

Teraz nie ma potrzeby ustawiania wymaganego atrybutu na true. Na przykład: <input type = "text" id = "name" required = "true" /> i <input type = "text" id = "name" required /> to to samo

— RSK

To prawda, to mój zły nawyk, kiedy byłem przyzwyczajony do kodowania w XHTML ... Ale czy wszystkie współczesne przeglądarki obsługują ten tag bez = "required"? Uważam, że Safari nie ...

— Loic Cara

Jakie jest rzeczywiste i oczekiwane zachowanie?

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

zgodnie z blog.grayghostvisuals.com/html/using-html-required-attribute „Jeśli atrybut jest obecny, jego wartością musi być pusty ciąg znaków lub wartość, która nie uwzględnia wielkości liter dla nazwy kanonicznej atrybutu, bez wiodące lub końcowe spacje ”. dla atrybutów „boolean”, więc zamiast required = „true” powinno było zawierać required = „required” lub po prostu wymagane

— George Birbilis

49

Właśnie natknąłem się na ten problem w Safari 5 i był to problem z Operą 10 od jakiegoś czasu, ale nigdy nie spędziłem czasu, aby go naprawić. Teraz muszę to naprawić i zobaczyłem Twój post, ale nie ma jeszcze rozwiązania, jak anulować formularz. Po długich poszukiwaniach w końcu coś znalazłem:

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

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

Działa na Safari 5 i Opera 10.

— Darrik Spaude
źródło

8

Możesz również użyć novalidatena tagu formularza, aby zrobić to dla całego formularza.

— Michael Mior

Spakowałem małe rozszerzenie Chrome dodające ten atrybut do wszystkich formularzy w bieżącej karcie, dzięki za wskazówkę! chrome.google.com/webstore/detail/html5-form-validation-rem/…

— Damien

Zależało moim przypadku formnovalidatedziała z przycisku typu submit też: <button type="submit" formnovalidate>Submit</button>.

— Mayeenul Islam

256

Zwróć na to uwagę

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

jest źle, powinien być jednym z

<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' />

Dzieje się tak, ponieważ truewartość sugeruje, że falsewartość spowoduje, że formant formularza będzie opcjonalny, co nie ma miejsca.

— Ms2ger
źródło

7

Ta odpowiedź jest prawdziwa, ale myślę, że to nie jest problem, który tu mamy.

— PhoneixS

czy to jest bezpieczne w użyciu? ... Mam na myśli to, czy powinienem tego używać, czy po prostu trzymać się walidacji javascript? mam na myśli bezpieczne, czy to rozwiązanie powoduje anomalie na innej przeglądarce / urządzeniu ...

— kebyang

8

Chciałbym zaznaczyć, że oryginalny kod nie jest „zły”, po prostu sugeruje, że można go użyć falsew celu uczynienia pola opcjonalnym (niewymaganym) - co nie jest prawdą. Musisz zrozumieć, że obecność requiredatrybutu sprawia, że pole jest wymagane. Jedynym sposobem, aby pole było opcjonalne, jest usunięcie atrybutu. A WALIDACJA PO STRONIE SERWERA NAPRAWDĘ MA ZNACZENIE (przepraszam za krzyki).

— Ryan Wheale,

@RyanWheale Myślę, że walidacja po stronie klienta (choć sama w sobie niewystarczająca) również ma znaczenie

— jinglesthula

1

@jinglesthula - walidacja po stronie klienta to nic innego jak wygoda dla użytkownika (oszczędność podróży w obie strony do serwera, co skutkuje lepszym UX). Odniosłem się do poprzedniego komentarza „czy to bezpieczne w użyciu [w różnych przeglądarkach]” - a odpowiedź jest taka, że nie ma to znaczenia, o ile działa walidacja po stronie serwera (np. Starsza przeglądarka nie rozpoznaje formularza HTML5 walidacja i prześle „wymagane” pole z wartością null).

— Ryan Wheale

19

Jeśli dobrze rozumiem Twoje pytanie, czy to, że requiredatrybut wydaje się mieć domyślne zachowanie w Safari, jest dla Ciebie wprawieniem w zakłopotanie? Jeśli tak, zobacz: http://w3c.github.io/html/sec-forms.html#the-required-attribute

required nie jest atrybutem niestandardowym w HTML 5. Jest zdefiniowany w specyfikacji i jest używany dokładnie w taki sposób, w jaki go obecnie używasz.

EDYCJA : Cóż, nie dokładnie . Jak zauważył ms2ger, requiredatrybut jest atrybutem logicznym , a oto, co ma do powiedzenia specyfikacja HTML 5:

Uwaga: wartości „true” i „false” nie są dozwolone w atrybutach logicznych. Aby przedstawić fałszywą wartość, atrybut musi zostać całkowicie pominięty.

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

— David Foster
źródło

2

Dlatego nie powinniśmy tworzyć niestandardowych atrybutów lub właściwości w standardowych obiektach.

— Quentin

Jakieś pomysły, jak to wyłączyć w Chrome i Safari na konkretnej stronie?

— Restuta

@Restuta przejdź do about: flags, aby wyłączyć to w Chrome. Firefox, nie jestem pewien.

— therealklanni

8

Safari 7.0.5 nadal nie obsługuje powiadomień o sprawdzaniu poprawności pól wejściowych.

Aby przezwyciężyć, można napisać skrypt awaryjny w następujący sposób: http://codepen.io/ashblue/pen/KyvmA

Aby zobaczyć, jakie funkcje HTML5 / CSS3 są obsługiwane przez przeglądarki, sprawdź: 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 / MNIEJ:

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

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

— Evalds Urtans
źródło

Dziękuję Ci. To mi bardzo pomogło.

— theGreenCabbage

Czy to zwykły CSS czy mniej?

— James A Mohler

Mam iPoda touch, który przez całe moje życie nadal się uruchamia, gdy wejścia oznaczone jako wymagane nie działają i znalazłem to pytanie i odpowiedź. Ta odpowiedź była jedyną, która mi pomogła. Pomyślałem, że się tym podzielę.

— Funk Forty Niner

7

Mała uwaga na temat atrybutów niestandardowych: HTML5 dopuszcza wszystkie rodzaje atrybutów niestandardowych, o ile są poprzedzone przedrostkiem particle data-, tj data-my-attribute="true".

— Ludder
źródło

1

I działają dobrze w starszych przeglądarkach (z wyjątkiem tego, że będziesz potrzebować własnego kodu, aby uzyskać dostęp do ich wartości, zamiast nowego interfejsu API), więc są lepszym wyborem niż tworzenie własnych atrybutów (ponieważ nie będą kolidować z żadnymi oficjalne atrybuty dodane w przyszłości).

— Paul D. Waite,

1

W rzeczywistości atrybuty niestandardowe mogą być dosłownie wszystkim. Te z prefiksem „data-” pojawią się jednak w element.datasetobiekcie, podobnie jak inne zalety (na przykład jQuery będzie w stanie automatycznie pobrać wartość dowolnego atrybutu niestandardowego z prefiksem „data-” przy użyciu .data()metody, tj. .data("myAttribute")= Wartość data-my-attribute). Używanie krótszych atrybutów niestandardowych może być czasami przydatne do tworzenia niestandardowych selektorów CSS3.

— therealklanni

3

W porządku. W tym samym czasie, gdy zapisywałem swoje pytanie, jeden z moich kolegów uświadomił mi, że tak naprawdę jest to zachowanie HTML5. Zobacz http://dev.w3.org/html5/spec/Overview.html#the-required-attribute

Wygląda na to, że w HTML5 jest nowy atrybut „wymagany”. Safari 5 ma już implementację tego atrybutu.

— Joop
źródło

Cholera, odpowiedziałeś na swoje pytanie w ciągu kilku sekund od umieszczenia przeze mnie tej samej odpowiedzi!

— David Foster

Rzeczywiście dzięki jednemu z moich kolegów. Przypuszczam, że może to być interesujące dla innych?

— Joop

Zdecydowanie! Nie mogę się doczekać, aby zobaczyć, jakie ostateczne specyfikacje HTML5 będą miały do zaoferowania na froncie formularza.

— David Foster

2

Po prostu umieść poniższe pod formularzem. Upewnij się, że pola wejściowe są 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>

— emocjonalność
źródło