HTML simple not blank pattern

Question

I have a simple form and i want the submit button not to work for the conditions i give in the pattern, but if i leave it blank the submit works. how can i make the pattern

Answer 1

HTML has the required attribute to accomplish this. If you set any input to be required, modern browsers won't let you submit the form if those fields are empty.

<input type="text" name="username" required="required" pattern="[A-Za-z0-9]{1,20}">

Answer 2

To prevent errors from showing on load, you can not use the HTML5 required attribute. You can use JavaScript. For example:

if ( $('#form-password').val() === "" ) 
{
    e.preventDefault();
}

Using HTML Patterns to match at least one:

<input type="text" name="username" pattern=".{1,}">