HTML5 Erforderliches Eingabe-Styling

In HTML 5, können wir markieren die Eingänge als required und dann wählen Sie Sie mit der [required] pseudo-Selektor in CSS. Aber ich will nur Stil, wenn Sie versuchen, das Formular zu senden, ohne ein Formular auszufüllen element benötigt. Gibt es einen Selektor für dieses? Wie wärs für die kleine message-box, die erscheint?

InformationsquelleAutor der Frage Xodarap | 2011-03-09

  1. 4

    Yeah, wie SLaks sagte, es ist keine CSS-Selektor zu tun. Ich würde bezweifeln das jemals in den Anwendungsbereich von CSS, weil CSS brauchen würde, um zu überprüfen, den Inhalt von input.

    Ihre beste option, dennoch ist wohl zum aufrufen einer javascript-Validierung Funktion, wenn Sie auf einen button, sondern tatsächlich dem Absenden des Formulars. Dann die überprüfung der [erforderlichen] Felder für die entsprechenden Inhalte und entweder dem Absenden des Formulars oder die Hervorhebung der Pflichtfelder wurden nicht ausgefüllt.

    JQuery hat einige nette plugins, die Pflege der dies für Sie
    http://docs.jquery.com/Plugins/validation

    InformationsquelleAutor der Antwort NikoRoberts

  2. 26

    Können Sie verwenden :valid und :invalid Selektoren. So etwas

    .field:valid {
    border-color:#0f0;
}
.field:invalid {
    border-color:#f00;
}

    Jedoch, dies funktioniert nur in Browsern, die Unterstützung für native Validierung und nur für Felder, die Sinn machen. Soweit ich weiß, gerade jetzt bedeutet das nur, dass Chrom (vielleicht Safari, aber noch nicht überprüft).

    So durch die native überprüfung meine ich, dass Chrom, wenn Sie <input type="email"> im Feld Wert wird validiert, für E-Mail-Typ string (ohne zusätzliches javascript), so dass die Stile oben arbeiten. Allerdings, wenn Sie waren, um Sie zu befestigen, um eine type="text" Feld, oder ein zweites Passwort-Feld (das ist wohl mit dem ersten), Sie würden immer nur grün, da ist alles gültig, und bei Passwort, es gibt kein "Typ" für das ja ohnehin.

    Was im Grunde bedeutet, dass auf alle Browser zu unterstützen, und noch wichtiger, breitere array von Validierungen, die Sie noch zu greifen, zu javascript, in dem Fall zuordnen .gültig/.ungültige Klasse sollte nicht das problem sein. 🙂

    InformationsquelleAutor der Antwort Ilia Draznin

  3. 12

    Habe ich gegriffen, um mit js anwenden Klasse .validiert das Formular auf senden, dann verwenden Sie diese Klasse, Stil :ungültige Felder.eg:


    .validated input:invalid {
    ...
    }

    Diese Weise Felder erscheinen nicht als ungültig auf mit der Seite geladen, nur nach dem senden des Formulars.
    Idealerweise wäre ein pseodo-Klasse angewendet, um die form auf "Absenden".

    InformationsquelleAutor der Antwort Toby

  4. 2

    Gibt es eine :user-error pseudoclass in der CSS-Selektoren 4 working draftdie tun genau das, Sie feuern auf beide input-Bewegungsunschärfe " und " Formular Absenden.

    In der Zwischenzeit werde ich mich persönlich mit der genial webshims polyfill-Bibliothekwelche umfasst :Benutzer-Fehler, oder Sie könnten hack es selbst heraus mit etwas entlang der Linien von Toby ' s Antwort.

    InformationsquelleAutor der Antwort Kevin C.

  5. 2
    input:required {
    /* Style your required field */
    /* Be sure to style it as an individual field rather than just add your desired styles
    for a required field. */
}

    Versucht und getestet in chrome. Ich habe es noch nicht getestet, in jedem anderen browser.

    InformationsquelleAutor der Antwort JustSomeGuy

  6. 1

    Diese Lösung wird Stil-input-Felder, die erforderlich sind, die über das Attribut während leer. Browsern entfernen :ungültige pseudo-Klasse beim Auffüllen ein erforderliches Feld für keydown. Aktuelle Versionen von Firefox wenden Sie automatisch etwas ähnliches zu diesem Stil, aber Chrome und IE nicht.

    input[required]:invalid { box-shadow: 0 0 3px 1px red }

    Probieren Sie es aus: http://jsfiddle.net/2Ph2X/

    InformationsquelleAutor der Antwort TaeKwonJoe

  7. 0

    Sehr einfach, fügen Sie einfach die Klasse, wenn das element im Fokus ist, während der submit-es setzt den Fokus auf die Elemente, die falsch sind, und der Kunde ist ausfüllen und die Validierung einer durch ein, ich glaube es ist die beste Lösung ohne Verwendung von js.

    input: required: focus {
   border-color: palegreen;
}
input: invalid: focus {
   border-color: salmon;
}

    InformationsquelleAutor der Antwort Navi

Schreibe einen Kommentar