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

Download