I made an <input type="text" placeholder="phone or email" required="required" /> and I was just wondering if I can make it so that it would require either a valid email or a number?

I made an <input type="text" placeholder="phone or email" required="required" /> and I was just wondering if I can make it so that it would require either a valid email or a number?

• javascript
• html

• HTML5 does have type="tel" and also type="email", but in order to determine if one should be used over the other you're going to need some javascript doing the heavy lifting. Watching for an @ sign or something would probably be the easiest way to go and then validate based on that. – ThatTechGuy Commented Jul 27, 2015 at 2:59
• @ThatTechGuy Im trying to do something of a tel and email bination, where if its not an email, then it should be a tel, without having to rely on js. – Pa3k.m Commented Jul 27, 2015 at 3:27
• Yeah, DRDs answer is pretty much your only option, I wasn't aware of a regex attribute but since it's so new as DRD explained you'll have issues with a few browsers. – ThatTechGuy Commented Jul 27, 2015 at 3:37

2 Answers 2

It is possible to implement HTML-only data validation on inputs using pattern attribute: http://jsfiddle/887saeeg/. Coupled with :valid and :invalid pseudo-classes, it is possible to have a decent error-checking functionality using only presentation technologies. Of course, a modern browser is required. (I cover browser-only 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.-]+\.[a-z]{2,3})|(\d{3}-\d{3}-\d{4})$"/>
    <input type = "submit" value = "Send" />
</form>

EDIT: Example using CSS pseudo-classes: http://jsfiddle/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;
}

In my case I am using form validator and i was able to solve my problem with
Validators.pattern(new RegExp("([0-9 ]{11})|([a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3})"))

([0-9 ]{11}) check for 11 digits number

| Or

([a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}) check for valid email