HTML input pattern not working validation

Question

I have very strange issue.

in a very sample search form with one input field:

 <input pattern="\S.{3,}"  name="text"/>

The validation fails for value

dds sdsd

, but JS says it's Ok.

 /\\S.{3,}/.test(' dds sdsd') true /\\S.{3,}/.test(' ') false 

Maybe I am missing something small or pattern is wrong, but according to regex.com it should be valid.
The idea is to prevent submit empty spaces. I am searching for a solution without write JS code.

 <form method="GET" action="/"> <input class="form-control" name="text" type="text" pattern="\\S.{3,}" /> <input type="submit" value="search" > </form> 

Answer 1

The HTML5 pattern is anchored by default, ^(?: and )$ are added at the start/end of the pattern when it is passed JS regex engine.

You need to use

<input pattern=".*\S.{3,}.*"  name="text"/>

to make it work the same way as in JS with RegExp#test .

However, to require at least 1 non-whitespace char in the input, I'd recommend using

<input pattern="\s*\S.*"  name="text"/>

See this regex demo . It will match 0+ whitespace chars at the start of the string ( \\s* ), then will match any non-whitespace char ( \\S ) and then will grab any 0+ chars greedily up to the end of the input.

 <form method="GET" action="/"> <input class="form-control" name="text" type="text" pattern="\\s*\\S.*" title="No whitespace-only input allowed."/> <input type="submit" value="search" > </form>