Ist es möglich, eine Eingabe = "Text" zu machen, um entweder eine E-Mail oder ein Telefon zu verlangen?

Question

Ich machte eine <input type="text" placeholder="phone or email" required="required" /> und ich fragte mich nur, ob ich es so machen kann, dass es entweder eine gültige E-Mail oder eine Nummer erfordern würde?

Answer 1

Es ist möglich, eine reine HTML-Datenüberprüfung unter input s unter Verwendung des pattern Attributs: http://jsfiddle.net/887saeeg/ zu implementieren. Gekoppelt mit den Pseudoklassen :valid und :invalid ist es möglich, eine anständige Fehlerprüfungsfunktionalität zu verwenden, die nur Präsentationstechnologien verwendet. Natürlich ist ein moderner Browser erforderlich. (Im letzten Band meiner Functional CSS-Buchreihe [verfügbar bei Amazon] verweise ich ausführlicher auf die reine Browser-Validierung).

HTML:

<form> 
    <input type = "text" placeholder = "Phone or Email" required pattern = "^([a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3})|(\d{3}-\d{3}-\d{4})$"/> 
    <input type = "submit" value = "Send" /> 
</form> 

EDIT: Beispiel mit CSS Pseudo-Klassen: http://jsfiddle.net/292pp5gk/.

HTML:

<form> 
    <label> 
     <input type = "text" placeholder = "Phone or Email" required pattern = "^([a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3})|(\d{3}-\d{3}-\d{4})$"/> 
     <span class = "error">Please provide a valid telephone or email</span> 
    </label> 
    <input type = "submit" value = "Send" /> 
</form> 

CSS:

label { 
    position: relative; 
} 

.error { 
    position: absolute; 
    white-space: nowrap; 
    bottom: -8px; 
    left: 0; 
    transform: translateY(100%); 
    display: none; 
    background-color: hsla(0, 50%, 70%, 1); 
    padding: 5px 10px; 
    border-radius: 5px; 
    font: normal 12px/1 Sans-Serif; 
} 

.error:before { 
    content: ""; 
    position: absolute; 
    border-style: solid; 
    border-color: transparent transparent hsla(0, 50%, 70%, 1) transparent; 
    border-width: 0 5px 5px 5px; 
    left: 15px; 
    top: -5px; 
} 

input { 
    outline: 0; 
} 

input:invalid + .error { 
    display: block; 
}