Erforderliches Attribut HTML5

81

In meiner Webanwendung verwende ich eine benutzerdefinierte Validierung für meine Formularfelder. Innerhalb desselben Formulars habe ich zwei Schaltflächen: eine zum tatsächlichen Senden des Formulars und die andere zum Abbrechen / Zurücksetzen des Formulars.

Meistens verwende ich Safari als Standardbrowser. Jetzt ist Safari 5 aus und plötzlich funktionierte meine Abbrechen / Zurücksetzen-Taste nicht mehr. Jedes Mal, wenn ich die Reset-Taste drückte, wurde das erste Feld in meinem Formular scharfgestellt. Dies ist jedoch das gleiche Verhalten wie bei meiner benutzerdefinierten Formularüberprüfung. Wenn Sie es mit einem anderen Browser versuchen, hat alles gut funktioniert. Ich musste ein Safari 5-Problem sein.

Ich habe meinen Javascript-Code ein wenig geändert und festgestellt, dass die folgende Zeile das Problem verursacht:

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

Um sicherzugehen, dass dies wirklich das Problem ist, habe ich ein Testszenario erstellt:

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

Was ich erwartet hatte, geschah. Das erste Feld "Name" erhielt automatisch den Fokus.

Ist sonst noch jemand darauf gestoßen?

html Joop
quelle
2
Jetzt müssen Sie das erforderliche Attribut nicht mehr auf true setzen. Zum Beispiel: <input type = "text" id = "name" required = "true" /> und <input type = "text" id = "name" erforderlich /> ist dasselbe
RSK
Es ist zwar eine schlechte Angewohnheit von mir, als ich zum Codieren in XHTML verwendet wurde ... Aber unterstützen alle modernen Browser dieses Tag ohne = "erforderlich"? Ich glaube, dass Safari nicht ...
Loic Cara
Was ist das tatsächliche und erwartete Verhalten?
Ciro Santilli 2 冠状 病 六四 事件 2
laut blog.grayghostvisuals.com/html/using-html-required-attribute "Wenn das Attribut vorhanden ist, muss sein Wert entweder die leere Zeichenfolge oder ein Wert sein, bei dem die Groß- und Kleinschreibung nicht mit dem kanonischen Namen des Attributs übereinstimmt führende oder nachfolgende Leerzeichen. " für die "booleschen" Attribute, also anstelle von erforderlich = "wahr" sollte erforderlich = "erforderlich" oder nur erforderlich sein
George Birbilis

Antworten:

49

Ich bin gerade auf dieses Problem mit Safari 5 gestoßen, und es ist seit einiger Zeit ein Problem mit Opera 10, aber ich habe nie Zeit damit verbracht, es zu beheben. Jetzt muss ich es reparieren und habe deinen Beitrag gesehen, aber noch keine Lösung, wie ich das Formular stornieren kann. Nach langem Suchen fand ich endlich etwas:

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

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

Funktioniert mit Safari 5 und Opera 10.

Darrik Spaude
quelle
8
Sie können dies auch novalidatefür das Formular-Tag verwenden, um dies für das gesamte Formular zu tun.
Michael Mior
Ich habe eine kleine Chrome-Erweiterung gepackt, die dieses Attribut allen Formularen auf der aktuellen Registerkarte hinzufügt. Vielen Dank für den Tipp! chrome.google.com/webstore/detail/html5-form-validation-rem/…
Damien
War wichtig für meinen Fall, formnovalidatefunktioniert auch mit Button Typ Submit : <button type="submit" formnovalidate>Submit</button>.
Mayeenul Islam
256

Beachten Sie, dass 

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

ist falsch, es sollte einer von sein

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

Dies liegt daran, dass der trueWert darauf hindeutet, dass der falseWert das Formularsteuerelement optional macht, was nicht der Fall ist.

Ms2ger
quelle
7
Diese Antwort ist wahr, aber ich denke, das ist nicht das Problem, das wir hier haben.
PhoneixS
ist das sicher zu benutzen? ... ich meine, sollte ich dies verwenden oder mich nur an die Javascript-Validierung halten? Mit sicher meine ich, diese Lösung erzeugt Anomalien auf verschiedenen Browsern / Geräten ...
Kebyang
8
Ich möchte darauf hinweisen, dass der ursprüngliche Code nicht "falsch" ist, sondern lediglich impliziert, dass Sie ihn verwenden falsekönnen, um ein Feld optional (nicht erforderlich) zu machen - was nicht der Fall ist. Das, was Sie verstehen müssen, ist, dass das Vorhandensein des requiredAttributs das Feld erforderlich macht. Die einzige Möglichkeit, das Feld optional zu machen, besteht darin, das Attribut zu entfernen. Und SERVER SIDE VALIDATION ist alles, was wirklich zählt (Entschuldigung für das Schreien).
Ryan Wheale
@ RyanWheale Ich denke, dass die clientseitige Validierung (obwohl sie an sich nicht ausreicht) auch wirklich wichtig ist
Jinglesthula
1
@jinglesthula - Die clientseitige Validierung ist nichts anderes als eine Annehmlichkeit für den Benutzer (Speichern von Roundtrips zum Server, was zu einer besseren UX führt). Ich habe einen früheren Kommentar angesprochen: "Ist dies sicher [für alle Browser] zu verwenden?" - und die Antwort lautet, dass es nicht wirklich wichtig ist, solange Ihre serverseitige Validierung funktioniert (z. B. erkennt ein älterer Browser das HTML5-Formular nicht Validierung und sendet ein "erforderliches" Feld mit einem Nullwert).
Ryan Wheale
19

Wenn ich Ihre Frage richtig verstehe, ist es die Tatsache, dass das requiredAttribut in Safari ein Standardverhalten zu haben scheint, das Sie verwirrt? Wenn ja, siehe: http://w3c.github.io/html/sec-forms.html#the-required-attribute

required ist kein benutzerdefiniertes Attribut in HTML 5. Es ist in der Spezifikation definiert und wird genau so verwendet, wie Sie es derzeit verwenden.

EDIT : Nun, nicht genau . Wie ms2ger hervorgehoben hat, ist das requiredAttribut ein boolesches Attribut , und hier ist, was die HTML 5-Spezifikation dazu zu sagen hat:

Hinweis: Die Werte "true" und "false" sind für boolesche Attribute nicht zulässig. Um einen falschen Wert darzustellen, muss das Attribut vollständig weggelassen werden.

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

David Foster
quelle
2
Aus diesem Grund sollten wir keine benutzerdefinierten Attribute oder Eigenschaften für Standardobjekte erstellen.
Quentin
Haben Sie Ideen, wie Sie dies für Chrome und Safari für die jeweilige Seite deaktivieren können?
Restuta
@Restuta gehe zu about: flags, um dies in Chrome zu deaktivieren. Firefox, ich bin mir nicht sicher.
Therealklanni
8

Safari 7.0.5 unterstützt weiterhin keine Benachrichtigung zur Validierung von Eingabefeldern.

Um dies zu überwinden, können Sie ein Fallback-Skript wie das folgende schreiben: http://codepen.io/ashblue/pen/KyvmA

Um zu sehen, welche HTML5 / CSS3-Funktionen von Browsern unterstützt werden, überprüfen Sie: 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 / WENIGER:

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

    &.invalid {
        border-color: red !important;
    }
}
Evalds Urtans
quelle
Danke dir. Das hat mir sehr geholfen.
TheGreenCabbage
Ist das einfaches CSS oder weniger?
James A Mohler
Ich habe einen iPod touch, der für mein ganzes Leben immer noch aktiviert wird, wenn die als erforderlich gekennzeichneten Eingaben nicht funktionieren und diese Fragen und Antworten gefunden haben. Diese Antwort war die einzige, die für mich funktioniert hat. Ich dachte nur, ich würde das teilen.
Funk Forty Niner
7

Ein kleiner Hinweis zu benutzerdefinierten Attributen: HTML5 erlaubt alle Arten von benutzerdefinierten Attributen, sofern ihnen das Partikel vorangestellt ist data-, d data-my-attribute="true". H.

Ludder
quelle
1
Und diese funktionieren in älteren Browsern einwandfrei (außer Sie benötigen Ihren eigenen Code, um auf ihre Werte zuzugreifen, anstatt auf die neue API), sodass sie eine bessere Wahl sind, als Ihre eigenen Attribute zu erstellen (da sie nicht mit irgendwelchen in Konflikt geraten offizielle Attribute in der Zukunft hinzugefügt).
Paul D. Waite
1
Tatsächlich können benutzerdefinierte Attribute buchstäblich alles sein. Diejenigen mit dem Präfix "data-" werden jedoch im element.datasetObjekt angezeigt , ebenso wie andere Vorteile (z. B. kann jQuery automatisch den Wert eines benutzerdefinierten Attributs mit dem Präfix "data-" mithilfe der .data()Methode abrufen , dh .data("myAttribute")= value of data-my-attribute). Die Verwendung kürzerer benutzerdefinierter Attribute kann manchmal hilfreich sein, um benutzerdefinierte CSS3-Selektoren zu erstellen.
Therealklanni
3

In Ordnung. Als ich meine Frage aufschrieb, machte mich einer meiner Kollegen darauf aufmerksam, dass dies tatsächlich HTML5-Verhalten ist. Siehe http://dev.w3.org/html5/spec/Overview.html#the-required-attribute

In HTML5 scheint ein neues Attribut "erforderlich" zu sein. Und Safari 5 hat bereits eine Implementierung für dieses Attribut.

Joop
quelle
Verdammt, du hast deine eigene Frage innerhalb von Sekunden beantwortet, nachdem ich die gleiche Antwort gepostet habe!
David Foster
Vielen Dank an einen meiner Kollegen. Das kann für andere interessant sein, nehme ich an?
Joop
Bestimmt! Ich bin gespannt, was die endgültige HTML5-Spezifikation auf der Formularseite zu bieten hat.
David Foster
2

Fügen Sie einfach Folgendes unter Ihr Formular ein. Stellen Sie sicher, dass Ihre Eingabefelder sind 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>
Emotionalität
quelle