How to Create HTML5 Form Validations

In this article, you will learn How to Create HTML5 Form Validations.HTML5 Form validation is client-side validation . With the help of the HTML5, we can validate the form with the pattern.

Types of Different Pattern Matching in HTML5

• Letter only
• Number only
• Email
• Password
• Mobile no
• URL

Letters Only

<form>
<input type="text" pattern="[A-Za-z]+" title="only letters" required />
<input type="submit">
</form>

Numbers Only

<form>
<input type="text" pattern="[0-9]+" title="numbers only" required />
<input type="submit">
</form>

Email

<form>
<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" title="xyz@mail.com" required />
<input type="submit">
</form>

Password

<form>
<input type="password" pattern=".{6,}" title="Six or more characters" required />
<input type="submit">
</form>

Mobile No.

<form>
<input type="tel" pattern="^\d{10}$" title="10 numeric characters only" required />
<input type="submit">
</form>

URL

<form>
<input type="url"  pattern="https?://.+" title="https://huboftutorials.com" required />
<input type="submit">
</form>

View Demo