HTML5 Form Validation With the “pattern” Attribute

Channel:
Subscribers:
1,630,000
Published on ● Video Link: https://www.youtube.com/watch?v=KsjHNPkSbAo



Category:
Tutorial
Duration: 5:32
10,206 views
114


In this video, you'll learn about HTML’s pattern attribute and how you can use it to customize the way you validate your forms. ► Download unlimited web templates and much more with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_KsjHNPkSbAo&utm_medium=referral&utm_source=youtube.com&utm_content=description

Form validation is of vital importance to a website’s security as well as its usability. The validation process evaluates whether the input value is in the correct format before submitting it. For example, if we have an input field for an email address, the value must certainly contain a valid email address; it should start with a letter or a number, followed by the @ symbol, and then end with a domain name.

The HTML5 specification has made validation that bit easier with the introduction of new input types such as email, url, and tel, and these also come packaged up with predefined validation. Whenever the value given is not met with the expected formatting, these input types will throw an error message, thus preventing submission.

Expecting every possible input scenario to be catered for is impractical, however. What if you have a username, zip code, or any special data types that are not specified as standard input types? How do we validate those inputs? This is where the attribute pattern comes into play. Learn how to use it in this step-by-step video.

Read more on HTML5 Form Validation With the “pattern” Attribute on Envato Tuts+: https://webdesign.tutsplus.com/tutorials/html5-form-validation-with-the-pattern-attribute--cms-25145?utm_campaign=yt_tutsplus_KsjHNPkSbAo&utm_medium=referral&utm_source=youtube.com&utm_content=description

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com/?utm_campaign=yt_tutsplus_KsjHNPkSbAo&utm_medium=referral&utm_source=youtube.com&utm_content=description

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_KsjHNPkSbAo&utm_medium=referral&utm_source=youtube.com&utm_content=description

► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus
► Follow Envato Tuts+ on Twitter: https://twitter.com/tutsplus
► Follow Envato Tuts+ on Facebook: https://www.facebook.com/tutsplus
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -







Tags:
form validation
html form validation
html
html5
pattern attribute in html
html 5
html form
input
programming
code
html5 tutorial
form
forms
html tutorial
web development
pattern attribute
validation
Envato
Tuts+
Envato Tuts+
javascript form validation
form validation in javascript
form validation tutorial