Is it possible to make input = "text" to require either email or tel?

Question

I made <input type="text" placeholder="phone or email" required="required" /> , and I'm just wondering if I can make it so that it requires either a valid letter or a number?

Answer 1

You can implement data validation only on HTML input using the pattern attribute: http://jsfiddle.net/887saeeg/ . In combination with the :valid and :invalid pseudo-classes, you can have a decent error check using only presentation technologies. Of course, a modern browser is required. (I only look at browser validation in more detail in the last volume of my functional CSS book series [available on Amazon]).

HTML:

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

EDIT: An example of using CSS pseudo-classes: http://jsfiddle.net/292pp5gk/ .

HTML:

 <form> <label> <input type = "text" placeholder = "Phone or Email" required pattern = "^([a-z0-9._%+-] +@ [a-z0-9.-]+\.[az]{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; }