2010-11-22 7 views
0

Hey, ich habe eine Form wie folgt aus:Formularfehler in HTML5 formatieren?

http://jsfiddle.net/Myxqk/

versuchen, etwas zu geben, was kein vaild E-Mail-Adresse ist wie "4asd".

Sehen Sie, was passiert.

Gibt es eine Möglichkeit, dieses Fehlerbild zu formatieren/zu ändern?

Zum Beispiel möchte ich nicht alles, möchte nur die Eingangsgrenze zu pulsieren. Oder werde rot.

Vielen Dank.

+0

Welcher Browser? Bildschirmfoto? –

+1

In Ihrem Beispiel gibt es keine Fehlerbehandlung. – Jeremy

+0

'type =" email "'? Ist das gültig? Wow, ich muss auf HTML 5 lesen –

Antwort

0
#input {border-color: red;} 

?

+0

er fragt nicht alle Eingabefelder als rot .... nur um das E-Mail-Feld zu markieren, wenn ein ungültiger Wert nur durch Verwendung von HTML5 E-Mail-Feld gesendet wird, bin ich rechts @ Fomicz – crodjer

+0

Ja. Ich möchte Validierungsbox-Look formatieren. – fomicz

+0

Sie können Javascript verwenden, um dies zu tun. Erstellen Sie ein Ereignis, dass beim Klicken auf die Schaltfläche "Senden" eine JS-Funktion aufgerufen wird, um zu prüfen, ob es sich um eine gültige E-Mail handelt. Wenn dies nicht der Fall ist, ändern Sie den Rahmenstil mit JS. Überprüfen Sie dies: http://www.randomsnippets.com/2008/04/01/how-to-verify-email-format-via-javascript/ – Lockhead

0

HTML5 ist nicht weit verbreitet, daher sollten Sie sich nicht auf das Verhalten eines Browsers für eine Spezifikation verlassen, die noch nicht abgeschlossen ist.

Deshalb, nur benutzerdefinierte JS/CSS, die was Sie wollen.

+0

Also, was ist die ID der Box unter meiner Eingabe, so werde ich angezeigt : nichts oder? – fomicz

+0

Ich sehe keine "Box", die vom Browser in Chrome oder Firefox generiert wird. Aus diesem Grund schlage ich vor, die Attribute überhaupt nicht zu verwenden, nur Klassen zu verwenden und die Validierung manuell durchzuführen. Andernfalls wird dieses Verhalten nicht browserübergreifend konsistent sein. –

+0

@fomicz es hat wahrscheinlich keinen. Meder schlägt vor, dass Sie eine andere Methode verwenden –

1

Die beste Lösung in meinem Fall war:

  1. "novalidate" zu meinem Formular-Tag hinzufügen (so kann ich immer noch stehen zu "E-Mail" -Eingang).

  2. Mit jQuery validieren (animate()).

Vielen Dank Jungs! Wie ich anfangs dachte, gibt es keine Möglichkeit, wirklich in HTML5-Kernfunktionen wie diese einzusteigen. Traurig, aber ich hoffe, sie werden es reparieren. Wenn nicht, wird es nutzlos sein, wo Design zählt!

+0

Sie wissen, dass die HTML5-Spezifikation nicht finalisiert ist, oder? Es ist seltsam, dass Sie erwarten, dass es überall funktioniert ... –