Introduction to new HTML5 Form Input Types, Attributes and Validation

Chris Love

@ChrisLove

ProfessionalASPNET.com

Who Am I?

ASP.NET MVP

ASP Insider

Internet Explorer User Agent

Author

Speaker

Tweaker, Lover of Mobile Web, JavaScript, CSS &

HTML5

Podcast Interviews

The Tablet ShowChris Love Talks Surface Pro, Mobile Development and Morehttp://thetabletshow.com/?ShowNum=80

Chris Love Does Enterprise Mobilityhttp://thetabletshow.com/?ShowNum=22

Deep Fried BytesMobile Web Is Not What The Other Guys Say It Ishttp

://deepfriedbytes.com/podcast/episode-74-mobile-web-is-not-what-the-other-guys-say-it-is/

Technology & FriendsTalking About Touchhttp://technologyandfriends.com/ <- Coming out Monday

JavaScript Libraries

DeepTissueJS – A Touch Gesture Abstraction Libraryhttp://deeptissuejs.com

PanoramaJS – JavaScript Library to Implement The Windows Phone Panorama Control in HTML5https://github.com/docluv/panoramajs

ToolbarJS – JavaScript Library to Implement a Mobile AppBar, like Windows Phonehttp://toolbarjs.com

Coming Soon!SPA – Single Page Application Router, View ManagerBackpack – Markup Manager leveraging LocalStorageFannyPack – Markup Manager leveraging on page markup??????

Resources

Slide Deck – http://www.slideshare.net/docluv <- Only

URL U Need!

Source Code – https://github.com/docluv/html5inputs

Live Site - http://html5inputs.azurewebsites.net/

HTML5 Brings New Input Types!

Text

File

Password

Radio

Checkbox

Hidden

Submit

Image

Reset

Button

HTML5 Brings New Input Types!

URL

EMAIL

NUMBER

SEARCH

RANGE

DATETIME

TEL

COLOR

MONTH

WEEK

DATE

TIME

HTML5 Brings New Elements!

DATALIST

PROGRESS

HTML5 Brings New Input Attributes!

AUTOFOCUS

REQUIRED

PLACEHOLDER

PATTERN

AUTOCORRECT

AUTOCOMPLETE

MIN, MAX, STEP

FORMACTION

FORMENCTYPE

FORMMETHOD

FORMVALIDATE

FORMTARGET

READONLY

Sometimes You Just Do Not Want AutoCorrect

Why Is This All Important?

Native Functionality Always A Good Thing

Guided Input Good User Experience

Touch – Help Users Type Less

On Screen Keyboards

New Input Types Drive On Screen Keyboards

How FedEx.com Could Increase Customer Satisfaction and Profits with 10 Minutes of HTML5

http://bit.ly/16pgnv3

E-Mail Keyboard

URL Keyboard

Number Keyboard

Pattern

Allows You To Define the Data Format Validation

Good For Overriding Native Validation & Behavior

Use Regular Expressions

http://html5pattern.com/

Placeholder

Allows You to Place a Message In The Input

Good For Guidance

Can Help Save Screen Real Estate on Phones ;)

Pattern=“Great Idea…”

Validation Bubbles!

Demo Time!

CSS Hooks

Pseudo Classes That Allow You To Overwrite Default Styles

:valid

:invalid

In WebKit Can Override Message Bubbles!

Demo Time!

Constraint Validation

Validation API

willValidate – Can Node Be Validated

validity – returns a ValidityState object

ValidatityState

valid – Does the Value meet criteria

customError – true if custom message set through setCustomValidity()

valueMissing – no value

typeMismatch – not valid based on input type

patternMismatch – does not match the supplied pattern

rangeOverflow & rangeUnderflow – Over or under the max and min attribute values

stepMismatch – invalid per step attribute

tooLong – exceeds maxLength value

checkValidity

Returns true if form node meets validity criteria

<form id="form-1">

<input id="input-1" type="text" required />

</form>

<script>

document.getElementById('form-1').checkValidity(); //false

document.getElementById('input-1').checkValidity(); //false

</script>

invalid Event

Fired Every Time An Input Field Fails Validation

document.getElementById('input-1').addEventListener('invalid', function() {

//Do Something Here...

}, false);

validationMessage

Contains the Message Displayed When Validity Check Fails

Pass Custom Message to setCustomValidity() method

Demo Time!

Dealing With Older Browsers

UPGRADE!!!!!!!

Dealing With Older Browsers

Use Polyfilshttps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

jQuery Validation Plugin

http://bassistance.de/jquery-plugins/jquery-plugin-validation/ <- Should Kick In

When Needed