Form validation with regular expression on input

Question

I have this form and I want to enter minimum 3 chars to input area.

<form class="navbar-search pull-left" method="GET" action="xx.php">
    <input pattern=".{3,}" title="Enter min 3 chars" name="q" type="text" class="search-query span3" data-provide="typeahead" placeholder="Search..." />
 </form>

This is working when I enter less than 3 chars but greater than 0 char. But if I press enter button directly when input area active there is not any notification and form going its direction. I want to handle this. How? Thanks.

Answer 1

You are missing the required attribute.

<form class="navbar-search pull-left" method="GET" action="xx.php">
<input pattern=".{3,}" title="Enter min 3 chars" name="q" type="text" 
class="search-query span3" data-provide="typeahead" 
placeholder="Search..." required/>
</form>

Fiddle here .