zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden HTML5-Formular mit Feld "email" und "tel": mindestens eines muss ausgefüllt sein

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.03.2018, 09:36
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.315
AndreasB wird schon bald berühmt werden
Standard HTML5-Formular mit Feld "email" und "tel": mindestens eines muss ausgefüllt sein

Moin.

Ein typischer Usecase bei einem Kontaktformular ist, dass man 2 Möglichkeiten anbieten möchte, die der Websitebetreiber zum Antworten verwenden soll.
Mail oder Telefon.

Damit der Websitebetreiber überhaupt antworten kann, muss der Absender mindestens eines der beiden Felder ausfüllen.
Also eine ODER-Logik.

Es dürfen also auch beide Felder ausgefüllt werden.

Wenn man eine bestmögliche Zugänglichkeit haben will: wie würdet ihr sowas bauen?

Kennt ihr eine gut gemachte Lösung mit einem clientseitigen Skript (für eine Rückmeldung noch vor dem Absenden) plus als Fallback ein serverseitiges PHP?

Danke.
__________________


Geändert von AndreasB (19.03.2018 um 12:51 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.03.2018, 09:43
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.965
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Dafür gibt es radiobuttons. Und wenn danach noch zusätzlich etwas ausgefüllt werden muss dann muss dafür Javascript verwendet werden.
Im Backend (also PHP) prüfst du dann, welche Werte ausgefüllt sind und welchen Wert die Felder haben.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.03.2018, 10:13
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.315
AndreasB wird schon bald berühmt werden
Standard

@cloned
Radiobuttons sind nicht dafür gedacht die Aufgabe „mindestens eines der felder abzubilden“.

Kern meiner Frage war ja die Bitte nach Beidpielcode. Kennst Du ein solches Beispiel?
__________________

Mit Zitat antworten
  #4 (permalink)  
Alt 19.03.2018, 10:43
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.965
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Radiobuttons sind dafür da, um aus einer Anzahl an Möglichkeiten genau eine auszuwählen. Du könntest ja auf "telefon", "Mail", oder "Mail und Telefon" abfragen.
Ansonsten nimm checkboxes.
Hier habe ich sogar dein Problem mit einer Lösung gefunden. Sogar mit Beispielcode.
Mit Zitat antworten
  #5 (permalink)  
Alt 19.03.2018, 12:49
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.315
AndreasB wird schon bald berühmt werden
Standard

@cloned

Danke für das Heraussuchen des Stackoverflow-Links.

Du missverstehst die Aufgabe noch.

Es geht um 2 Inputfelder, eines mit type="email" und ein weiteres mit type="tel". Es geht nicht um type="checkbox".
__________________

Mit Zitat antworten
  #6 (permalink)  
Alt 19.03.2018, 13:03
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.965
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Dann erweitere das Beispiel. Bei check von checkbox "email" wird das email feld angezeigt, bei "tel" wird das tel-Feld angezeigt.
Bzw. du wirst bei deiner Lösung um Javascript nicht herumkommen, du kannst bei beiden Feldern das "required" attribut ausspielen und dann mittels Javascript entfernen, wenn etwas in ein Feld eingegeben wurde.

Und bevor wieder "Bitte schreibt den Code für mich, äh Codebeispiel bitte" kommt:

Code:
$("input[data-required='true'").on("change", function() {
  $("input[data-required='true'").removeAttr("required");
}); 
//muss natürlich angepasst werden, damit das attribut wieder dazukommt wenn es gelöscht wird. Aber es ist ein Codebeispiel.
Auch im Backend wirst du das dann separat überprüfen müssen.
Mit Zitat antworten
  #7 (permalink)  
Alt 20.03.2018, 06:44
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.315
AndreasB wird schon bald berühmt werden
Standard

@cloned
Danke für Dein Beispiel.
(Die kleine Spitze zu meinen Wunsch nach Beispielcode wäre nicht nötig gewesen. Nicht umsonst ist z.B. auf anderen Plattformen wie stackoverflow Beispielcode ausdrücklich erwünscht und nicht verpönt.)

Heute morgen dachte ich daran, dass ein ideales universelles Skript (JS und PHP) erlauben würde, die Logik für notwendige Felder direkt einzugeben.

HTML-Code:
<label for="tel">E-Mail</label>
<input name="email" id="email" type="email" />
<label for="tel">Telefon</label>
<input name="tel" id="tel" type="tel" />
<label for="text">Text</label>
<textarea name="text" id="text"></textarea>
Zusätzlich zu den Feldern Mail und Telefon darf ja sinnvollerweise der
Inhalt von Textarea nicht leer sein.

Also: (A OR B) AND C

Im Skript könnten die eindeutigen IDs der Felder verwendet werden.

Also: (email OR tel) AND text

Vielleicht wird in zukünftigen Versionen von HTML so etwas mal direkt im Markup möglich sein. Gruppierung ist ja schon via fieldset möglich.

Ist ja unschön, wenn Programmierer für Formulare für Standardsituationen jedesmal das Rad neu erfinden müssen. Auch im Sinne der guten Zugänglichkeit wäre eine Standardisierung der Abbildung der Logik gut.
__________________


Geändert von AndreasB (20.03.2018 um 06:51 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 20.03.2018, 07:58
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.965
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Zitat:
Zitat von AndreasB Beitrag anzeigen
(Die kleine Spitze zu meinen Wunsch nach Beispielcode wäre nicht nötig gewesen. Nicht umsonst ist z.B. auf anderen Plattformen wie stackoverflow Beispielcode ausdrücklich erwünscht und nicht verpönt.)
Stimmt, es ist bei Stackoverflow ausdrücklich erwünscht, dass der Fragende einen Beispielcode postet, anhand dessen das Problem ersichtlich ist


Zitat:
Zitat von AndreasB Beitrag anzeigen
Heute morgen dachte ich daran, dass ein ideales universelles Skript (JS und PHP) erlauben würde, die Logik für notwendige Felder direkt einzugeben.
Leider gibt es so viele unterschiedliche Anforderungen an Formulare, da wird es auch hier schwer sein, ein "universelles" Script zu finden. Es ist außerdem viel performanter, wenn man ein auf das Problem exakt zugeschnittenes Skript verwendet.


Zitat:
Zitat von AndreasB Beitrag anzeigen
Vielleicht wird in zukünftigen Versionen von HTML so etwas mal direkt im Markup möglich sein. Gruppierung ist ja schon via fieldset möglich.

Ist ja unschön, wenn Programmierer für Formulare für Standardsituationen jedesmal das Rad neu erfinden müssen. Auch im Sinne der guten Zugänglichkeit wäre eine Standardisierung der Abbildung der Logik gut.
Nein, das wird wohl nie möglich sein. Auch wenn ich mich mit der Aussage jetzt weit aus dem Fenster lehne. HTML ist nur für die Struktur des Dokuments verantwortlich, für die Logik gibt es Javascript (und dann auch noch PHP, etc). Es muss sowieso alles im Backend überprüft werden, da auf der HTML Seite durch den Nutzer alles geändert werden kann. Auch können unvollständige Anfragen abgeschickt werden etc. Das alles zu verarbeiten muss Serverseitig basieren. Eine zusätzliche Validierung auf der Seite ist nett, mehr aber auch nicht.
Mit Zitat antworten
  #9 (permalink)  
Alt 20.03.2018, 08:27
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.315
AndreasB wird schon bald berühmt werden
Standard

@cloned
Wir beiden ticken sehr verschieden und werden vermutlich auch in Zukunft zu allen möglichen grundlegenden Themen verschiedener Ansicht sein.

Es überrascht mich in keiner Weise, dass Du das Anliegen "universales Skript" für die Aufgabe "Logik abbilden" langweilig und falsch findest.
Du liebst Lösungen für Einzelfälle.
Bei mir ist es genau umgekehrt.

Zu Deinen Aussagen "HTML wird sowas nie können":
Schau Dir einfach an, was HTML5-Formulare heute schon können.
Zum Beispiel die Attribute required oder pattern (habe ich eben zur Validierung eines Formularinhaltes mit einem RegEx mal getestet, super Sache).

Wir beiden kommen also auch bei Spekulationen/Extrapolationen zu völlig verschiedenen Schlussfolgerungen.

Ein gutes serverseitiges Skript würde sich natürlich auf eine bereits erfolgte clientseitige (hier durch HTML5-Funktionen) Prüfung verlassen und nicht redundant zusätzlich was eigenes verwenden.

Unvollständige Angaben können übrigens bei dem, worüber wir hier gerade sprechen gar nicht abgesendet werden. HTML5 verhindert dies.
__________________


Geändert von AndreasB (20.03.2018 um 08:31 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 20.03.2018, 09:09
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.965
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Klar, aber wenn alle die Selbe Meinung hätten wäre es doch sehr langweillig

Auch habe ich nie gesagt, dass ich es "langweilig" und "falsch" finde. Lege mir bitte hier keine Worte in den Mund, die ich nie gesagt habe. Oder möchtest du, dass man deine Aussagen interpretiert wie es einem passt? Falls nicht, dann behandle bitte andere Gesprächspartner ebenso.
Lasse es mich anders formulieren: Lösungen sollten so sein, dass sie wiederverwendet und schnell adaptiert werden können. Es soll aber nicht universell sein, da es sonst nicht performant ist.
Performant heißt, dass das Skript sonst "zu langsam" ist. Möchtest du ein universelles Skript, so muss das auch alle möglichen Varianten bedenken und berücksichtigen. Das macht das Skript dann unnötig langsam. Ein performantes Skript liefert dem User schnell Ergebnisse. Das ist eine messbare Größe (und auch etwas, was den Benutzer interessiert)
Natürlich soll so ein Skript im Idealfall mit minimalem Aufwand auf ein anderes Problem übertragen werden können. Aber universell soll es eben wegen Geschwindigkeit nicht sein.

Ich weiß, was HTML5 Formulare heute schon können. Verwende dies auch sehr gerne. Nichtsdestotrotz ist eines der ersten Dinge, die man beim Umgang mit Formularn lernt folgendes: Man darf sich nie (wirklich nie!) auf das verlassen, was abgeschickt wird.
Das wird einem nicht nur in der Schule/Studium so beigebracht (sofern man die Fächer hatte), das wird auch im Internet in so ziemlich jedem (halbwegs sinnvollen) Beitrag über Formulare nochmal extra betont.

Unvollständige Angaben können nämlich bei den HTML5 Formularen durchaus vorkommen. Was ist, wenn mein Browser diese Attribute nicht unterstützt? Dann kann ich jeden beliebigen Wert eingeben, den ich will. Egal, ob required oder pattern oder was auch immer.
Was ist, wenn ich einfach die dev-tools öffne und bei jedem Element die pattern/required Parameter entferne. Dann greift die Validierung auch nicht und das Backend muss diese abfangen.
Vielleicht schaue ich auch einfach in den Netzwerktab der devtools und analysiere, was abgeschickt wird und erstelle anhand dessen meinen eigenen Request, unabhängig vom browser.
HTML5 validierung ist also schön, sinnvoll und soll auch verwendet werden, aber bitte nur unterstützend.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
HTML5 Formular mit Att. required singel Javascript & Ajax 3 24.02.2014 10:45
Formular padding Problem im IE 7 unic CSS 8 18.01.2009 13:12
Anordnung von Input Feldern im Formular will nicht klappen.. MaDmAsTeR CSS 3 16.07.2005 22:04


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:08 Uhr.