Is it possible to configure a required field to ignore white space?

html required-field
BenMorel picture BenMorel · Dec 7, 2012 · Viewed 34.6k times · Source

The required attribute in HTML5 is very handy:

<input type="text" required>

But it still allows users to enter white space only. Is there an HTML-only solution to this?

Answer

James Messinger picture James Messinger · Jun 26, 2013

Use the pattern attribute combined with the required attribute. And be sure to include a title attribute as well, since most browsers insert the title text into the validation pop-up bubble.

<input required pattern=".*\S+.*" title="This field is required">

The .*\S+.* pattern requires at least one non-whitespace character, but also allows whitespace characters (spaces, tabs, carriage returns, etc.) at the beginning or end. If you don't want the user to be able to put whitespace at the beginning/end, then use this instead:

<input required pattern="\S+" title="This field is required">

Related questions

HTML required readonly input in form

I'm making a form. And on one input tag is an OnClick event handler, which is opening a popup, where you can choose some stuff, and then it autofills the input tag. That input tag is also readonly, so only …

Read More
html5 required validator not working with input type=button

Here is my html code <form id="form1" runat="server"> <input id="q" required /> <input id="btn" type="submit" value="Search"> </form> I have used html5 required field validators, it works but …

Read More
how to bypass required field validation when clicking the cancel button?

I've used HTML input type for my textboxes to utilize the required attribute. now my dilemma is i cannot go out of the page without filling-up the fields with required attributes. Ive tried using causeValidation set to false but its …

Read More