HUB OF TUTORIALS
  • Business
  • Digital Marketing
  • Technology
    • HTML
    • CSS
    • jQuery
    • WordPress
    • Core PHP
    • Mysql
    • JAVA
    • Projects
    • Photography
  • Recipes
  • Others
  • Write for Us
HUB OF TUTORIALS
  • Business
  • Digital Marketing
  • Technology
    • HTML
    • CSS
    • jQuery
    • WordPress
    • Core PHP
    • Mysql
    • JAVA
    • Projects
    • Photography
  • Recipes
  • Others
  • Write for Us
  • Business
  • Digital Marketing
  • Technology
    • HTML
    • CSS
    • jQuery
    • WordPress
    • Core PHP
    • Mysql
    • JAVA
    • Projects
    • Photography
  • Recipes
  • Others
  • Write for Us
HUB OF TUTORIALS
  • Business
  • Digital Marketing
  • Technology
    • HTML
    • CSS
    • jQuery
    • WordPress
    • Core PHP
    • Mysql
    • JAVA
    • Projects
    • Photography
  • Recipes
  • Others
  • Write for Us
HTML

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

Download

form validation using jquery html form javascript validator js validator types of email
Medical Store Management SystemPrevMedical Store Management SystemMarch 12, 2020
How to Make ID Card Using PHP Mysql and HTMLMarch 12, 2020How to Make ID Card Using PHP Mysql and HTMLNext

Leave a Reply

Your email address will not be published. Required fields are marked *

Search
Recent Posts
  • 7 Educational Approaches for Diverse Learners
  • 5 Best Online Payment Gateways in India
  • How to Start and Earn from Making WooCommerce Plugins
  • Step By Step Guide to Becoming a Certified Salesforce Developer
  • A Guide to Transitioning from On-Premises to Azure Services
Categories
  • Business
  • Core PHP
  • CSS
  • Digital Marketing
  • HTML
  • JAVA
  • Jobs
  • jQuery
  • Mysql
  • News
  • Others
  • Photography
  • Projects
  • Recipes
  • WordPress

  • How to Create List in HTML
  • How to use Iframe in HTML
  • How to Create a Table in HTML and CSS
  • How to Add New HTML Content using jQuery
  • CSS Property of List tag in HTML
  • How to use CSS for Table in HTML
  • How to Make Basmati Rice Recipe
  • How to Make Indian Kheer Recipe
  • How to Make Spicy Aloo Tikki
  • How to Make Aloo Matar Samosa
  • How to Make Cheese Potato Sandwich
  • How to Make Aloo Palak Methi
  • Company Visitors Management System
  • Complaint Management System using PHP
  • Directory Management System
  • Employee Record Management System
  • Hospital Management System using PHP
  • Vehicle Parking Management System

Copyright © 2022 Hub of Tutorials. All Rights Reserved. Designed by AS Webworks