Benötige dringend Hilfe bei dem HTML5 Attribut "pattern"

[Mirco1502]

Hallo zusammen,

ich werden mich so langsam aber sicher verzweifelt an euch und hoffe sehr das ihr mir helfen könnt.

Es geht um das "pattern" Attribut in HTML5

Ich möchte in einem Formular ein Feld für eine Handynummer haben das Ziffern und die drei Sonderzeichen "/" "-" "s" (space) erlaubt. Unzwar in beliebiger Reihenfolge und beliebiger Häufigkeit.
Mein Pattern sieht hierfür aktuell so aus:

pattern="[0-9\-\s\/]"

was so aber nicht funktioniert. Ich habe nun wirklich schon Stunden damit zugebracht nach "Pattern" und "regular expressions" zu googeln um eine Seite zu finden die einem mal ganz Simpel die Basics erklärt wie ich diese expressiones verkette um was zu erhalten. Ohne Erfolg. Jede Seite die ich gefunden habe kam gleich mit fertigen Beispielen daher für amerikanische Zipc codes oder was weiß ich. Aber keine Seite die einem mal aufzeigt wie man sein eigenes pattern zusammen stellen kann, eben wie hier in meinem Fall.

Ich muss dieses Formula heute bis 13:00 uhr zum Laufen bringen und hoffe wirklich das mir hier einer helfen kann.

Vielen Dank im voraus

Gruß

Mirco

 

[cythux]

Eventuell hilft Dir dies ja
http://diveintohtml5.info/forms.html
http://www.html5rocks.com/de/tutorials/forms/html5forms/

 

[Mirco1502]

Danke, aber leider nicht. Auch auf diesen Seiten wird nicht auf die individuelle Gestaltung von Patterns eingegangen :/

 

[Squeendot]

Hallo Mirco,

dir ist da nur ein ganz kleiner Fehler unterlaufen
Nur ein Syntaxfehler:

Du hast geschrieben:

pattern="[0-9\-\s\/]"

Richtig sieht es so aus:

pattern=([0-9])\(-)\(s)\(/)

Also zumindest funktioniert das so bei mir
Einlesen kannst du dich hier, wenn du willst:


Viel Erfolg und ich hoffe, ich konnte helfen

 

[CrazyLopp]

Das sollte dir eventuell helfen:
http://html5pattern.com/Phones

 

[Mirco1502]

Hallo Squeendot,

vielen dank vorab. Ich habe diesen pattern mal so in mein html dokument kopiert, musste aber noch die beiden "" hinzufügen weil er es sonst nicht genommen hat.

Leider funktioniert es so bei mir nicht, er scheint das pattern nicht zu erkennen, denn er erlaubt zwar die Telefonnummer, nimmt es aber auch an wenn ich einfach nur "Hans Peter" in das Feld reinschreibe :/

Bei mir sieht der String gerade so aus:

<input type="tel" name="mobil" id="mobil" placeholder="Mobilfunknummer *" pattern="([0-9])\(-)\(s)\(/)" required>

@CrazyLopp: Danke, auf dieser Seite war ich auch schon, an sich nicht schlecht nur werden auch hier leider nur fertige Beispiele angegeben. Ich habe versucht aus der Anwendung der patterns schlau zu werden, um das Wissen dann auf mein eigenes pattern anzuwenden. Allerdings ohne Erfolg weil ich die benötigten expressions nicht eindeutig herausfiltern konnte.

 

[Squeendot]

Hallo Mirco,

das "pattern"-Attribut ist auch nicht dafür da, nur zulässige Zeichen in einem Feld zuzulassen, sondern es prüft beim Absenden, ob die eingegebenen Zeichen in diesem Feld vorhanden sind. Das sieht man gut an dem Ausdruck "required", welchen du sogar hinten anstehen hast...

Das was du machen möchtest, ist leider etwas komplexer.

Mein Wissensstand ist leider nur so weit, dass ich dir zeigen kann, wie man nur Zahlen eingeben kann. Das funktionert mit PHP und sieht dann so aus:

<?php
if($_POST['submitbutton'] == "Speichern")
{
if($_POST['telefonnummer'])
{
if(@ereg('^[0-9]+$', $_POST['telefonnummer']))
{
if(strlen($_POST['telefonnummer']) == 20)
{
echo "Speichern erfolgreich. <br>"; //---hier den script zum speichern ect.--->
}
else
{
echo "Es müssen genau 20 Zahlen eingegeben werden.<br>";
}
}
else
{
echo "Es dürfen keine Buchstaben/Zeichen enthalten sein. Nur Zahlen.<br>";
}
}
else
{
echo "Bitte geben sie zur Speicherung, ihren Kundennummer ein.<br>";
}
}
?>

<form action="insert.php" method="post">
<p>Telefonnummer<br>
<input name="telefonnummer" type="text" size="8" maxlength="8">
</p>
<input type=submit value=speichern name=submitbutton>
</form>

Ob mann jetzt oben bei der @ereg auch Sonderzeichen einsetzen darf, weiß ich leider nicht. Einfach mal ausprobieren...


LG

Julian

 

[CrazyLopp]

Man sollte auch beachten das Safari dies nicht unterstützt, also braucht man in jedem Fall ein weitere Kontrolle ob per Javascript oder Serverseitig.

 

[Squeendot]

Stimmt, da hat CrazyLoop recht. Am besten JS mit reinhauen, das ist nicht so schwer...

 

[Mirco1502]

Okay super, vielen Dank euch allen ich fuchs mich da nochmal rein

Euch ein schönes Wochenende!

Gruß

Mirco