Validate HTML Inputs w/ Pattern Attribute

Validate HTML Inputs w/ Pattern Attribute

Add a simple pattern and title attribute on any HTML input to only allow a specific value or part of a value to be accepted. This can be used to validate emails from a specific domain like “@example.com” or only accept links that include a specific string. The title attribute allows a custom message appear in a browser default tooltip if the email entered isn’t valid.

Within the pattern attribute we use regex to determine what value match is approved. You can use regex to match just about anything, so this general approach can also be used to match other specific values in any input.

Industries

Creators

Have feedback or a question related to this item? Drop us some feedback!

Curated: 
5.4.23

Similar items

Featured
Preview

Collaborate on designs and website review

View item
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Coda

12.3.19

Draftbit

12.3.19

Latch

12.3.19

Michal Kmet

12.3.19

Qaitomo UI kit

12.3.19

Heco

12.3.19

Almond Studio

12.3.19

Adlava

12.3.19

EyeEm

12.3.19

Niika

12.3.19

Circles Conference

12.3.19

Living Roofs Inc.

12.3.19

INFIMA

12.3.19

Alex van Zijl

12.3.19

Centerstage

12.3.19

SJ Zhang

12.3.19

Disco

12.3.19

The Futur

12.3.19

Cobo

12.3.19

Datum

12.3.19

Daily.co

12.3.19

Toybox

12.3.19

The Charlee Salon

12.3.19

Strava Business

12.3.19

#Paid Creator Campaigns

12.3.19

Moon® UltraLight

12.3.19

Dot Wireframe Kit

12.3.19

Dan Arbello

12.3.19

Webflow Brand

12.3.19

Eyebasic

12.3.19

Welcome to Brandland

12.3.19

Sumit Hegde

12.3.19

Failory

12.3.19

Happy Hues

12.3.19

Omnify

12.3.19

Not Forget

12.3.19

HelloSign

12.3.19

Bubble

12.3.19

Buildbox

12.3.19

Airtable

12.3.19

BEE Free

12.3.19

Make

12.3.19

Dynamic CMS Form Select Input

12.3.19

Slider start from slide # - Publishing Help / Custom Code - Webflow Forums

12.3.19

How to add Schema Markup to your Webflow Project

12.3.19

How to sell Webflow to clients

12.3.19

Design tools are holding us back

12.3.19

Moving Our Blog From Medium to Webflow (Subdomain to Subfolder)

12.3.19

4 ways Kisi used Webflow to grow organic traffic by 300%

12.3.19

Scroll & Snap Full Page Sections with Webflow and Scrollify

12.3.19

The trick to viewport units on mobile | CSS-Tricks

12.3.19
Load more

Bummer, no results

Try a different search/filter combo, or drop us some feedback if there is something missing you would love to see!

Reset filters

Subscribe for updates

Get updates on the latest curated resources and be the first to hear of new features.