form_validation_with_html5

Apr 2, 2015Download as pptx, pdf0 likes330 views

This document discusses HTML5 form validation, which allows browsers to perform client-side validation of forms using new input types and attributes. This reduces the need for custom JavaScript validation code. However, server-side validation is still required. The document provides examples of how to specify required fields, regular expressions, data types, and validation error handling using HTML5. It also discusses browser support and fallback options to polyfill functionality for older browsers.

Significant Work. Extraordinary People. SRA.
Form Validation with HTML5
Ryan R. Williams
Date: 07/09/2013

2Significant Work. Extraordinary People. SRA.
What?
• HTML5 client-side <form> validation
• New <input> types and attributes make it easy
• One drawback … you still need to perform server side validation

3Significant Work. Extraordinary People. SRA.
HTML 4
• Client-side validation requires JavaScript
• Custom code, jQuery validate, etc.
• Extra work to give the user optimal UX

4Significant Work. Extraordinary People. SRA.
HTML5
• New <input> types and attributes
• Browsers have built-in client-side validation

5Significant Work. Extraordinary People. SRA.
For Example

6Significant Work. Extraordinary People. SRA.
Required fields
<input type=“text” required>

7Significant Work. Extraordinary People. SRA.
Regex with pattern attribute
<input type=“text” required
pattern=“(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)dd”
placeholder=“mm/dd/yyyy”>

8Significant Work. Extraordinary People. SRA.
Other Validations
<input type=“email” required
placeholder=“Enter your email”>
<input type=“url” required
placeholder=“Website”>
<input type=“number” value=“1”
min=“1” max=“10” required>

9Significant Work. Extraordinary People. SRA.
HTML5 Forms + CSS3
• New pseudo classes better for UX
• Visual cues and feedback to guide the user

10Significant Work. Extraordinary People. SRA.
:required and :optional
label + input:required {
background:hsl(180, 50%, 90%);
}
label + input:optional {
border:1px dotted hsl(180, 50%, 90%);
background:hsl(300, 50%, 90%);
}

11Significant Work. Extraordinary People. SRA.
:valid and :invalid
label + input:valid,
label + input:in-range {
background:hsl(120, 50%, 90%);
border-color:hsl(120, 50%, 90%);
}
label + input:invalid,
label + input:out-of-range {
background:hsl(0, 50%, 50%);
border-color:hsl(0, 50%, 90%);
}

12Significant Work. Extraordinary People. SRA.
No validation?
<form novalidate>
…
</form>

13Significant Work. Extraordinary People. SRA.
Cross browser?
Firefox? Yes. (4.0+) 
Safari? Yes. (4.0+) 
Chrome? Yes. (3.0+) 
Opera? Yes. (10.0+) 
iPhone? No. 
Android? No. 
Internet Explorer? Something like that... (10.0+) 
http://diveintohtml5.info/forms.html#validation

14Significant Work. Extraordinary People. SRA.
JavaScript fallback…
• Modernizr library for HTML5 detection
//only polyfill forms, if placeholder or autofocus are not supported
if(!Modernizr.input.placeholder || !Modernizr.input.autofocus){
jQuery.webshims.polyfill('forms');
}

15Significant Work. Extraordinary People. SRA.
Further info
• A Form of Madness
http://diveintohtml5.info/forms.html
• Forward Thinking Form Validation
http://alistapart.com/article/forward-thinking-form-validation
• New Form Features in HTML5
http://dev.opera.com/articles/view/new-form-features-in-html5/
• Modernizr JavaScript Library
http://modernizr.com/

16Significant Work. Extraordinary People. SRA.
Can also be used in…
• In browser extensions
• Greasemonkey scripts
• Prototyping/designing in the browser

17Significant Work. Extraordinary People. SRA.
Questions?

In this talk Chris Heilmann and Robert Nyman de-mystify some of the rumours around HTML5 and show you just how many tasks of day-to-day app development can be done by the browser for you rather than having to write all the code by yourself. Life as a front-end developer is much easier than you think - if you keep up-to-date and embrace the movement that wants to make the web an easier and faster place for all. The audio of the talk is available at http://www.archive.org/details/Html5IsHere-ChrisHeilmannAndRobertNymanAtFosdem2011

Autoformsjeff kit

AutoForms is a custom form engine for Django that allows users to declare forms at runtime, serialize form data, and dynamically generate forms. It can be used for polling, information collecting, custom forms in workflows, and dynamic forms in Django apps. Key features include declaring forms programmatically, previewing forms, setting advanced field options, customizing error messages, collecting and accessing submitted form data, and displaying stored data.

Using jQuery to Maximize Form UsabilityMark Rackley

Building Web-API without Rails, Registration or SMSPivorak MeetUp

The document discusses problems with Rails and other frameworks like Sinatra, and proposes using Rack to build a simple yet high-performing API framework. It demonstrates how to build responders as Rack applications with classes that encapsulate response codes, headers and bodies. The responder framework is faster and more maintainable than alternatives like Rails or Sinatra. It achieves performance gains through a minimalistic approach while still supporting features like status codes, parameters and metadata.

Challenges going mobileChristian Rokitta

jQuery Mobile has been integrated in APEX since version 4.2 and building a mobile web application with APEX seems magically easy ever since. Once you start a mobile project you will be confronted with a number of challenges related to the jQuery Mobile frameworks mechanisms. This session tends to explain the fundamentals that are important to know for APEX developers and how to deal with these in APEX development. When creating a mobile web application with APEX, knowledge of how jQuery Mobile works and how it is different from what we are used to as APEX developers is essential, I learned this during projects. This session will explain the important jQuery Mobile framework mechanisms and how to deal with these in APEX: Page loading and submitting data; customizing the user interface elements; debugging, testing and inspecting on actual mobile devices.

Efficient Rails Test-Driven Development - Week 6Marakana Inc.

Learn how to apply the test-first approach to all of your Rails projects. In this six class series, experienced Rails engineer and consultant, Wolfram Arnold applies his real-world perspective to teaching you effective patterns for testing. In this sixth of six classes, Wolf discusses: - Integration frameworks (Cucumber, Webrat, Capybara, and Selenium) - Integration testing with Selenium (advantages and problems) - Page Objects - Locators (Selenium, CSS and XPath locators - RSpec Custom Matchers - Testing for Access Control ** You can get the slides and source code from this presentation at: http://marakana.com/f/215 ** Find more videos, tutorials, and code examples at http://marakana.com/techtv

Efficient Rails Test Driven Development (class 3) by Wolfram ArnoldMarakana Inc.

Learn how to apply the test-first approach to all of your Rails projects. In this six class series, experienced Rails engineer and consultant, Wolfram Arnold applies his real-world perspective to teaching you effective patterns for testing. In this third of six classes, Wolf covers: - Controller testing - View, Helper, Routes Testing - How much is enough? How much is too much? ** You can get the video and source code from this presentation at: http://marakana.com/f/201 ** All six classes will be available online, so stay tuned! And be sure to check out marakana.com/techtv for more videos on open source training. Presented by: Wolfram Arnold, in collaboration with Sarah Allen, BlazingCloud.net Produced by: Marakana

Efficient Rails Test Driven Development (class 4) by Wolfram ArnoldMarakana Inc.

Learn how to apply the test-first approach to all of your Rails projects. In this six class series, experienced Rails engineer and consultant, Wolfram Arnold applies his real-world perspective to teaching you effective patterns for testing. In this fourth of six classes, Wolf covers: - Refactoring code & tests, custom matchers - API Testing - Remote data setup - Cucumber for API testing & documentation ** You can get the video and source code from this presentation at: http://marakana.com/f/204 ** All six classes will be available online, so stay tuned! And be sure to check out marakana.com/techtv for more videos on open source training. Presented by: Wolfram Arnold, in collaboration with Sarah Allen, BlazingCloud.net Produced by: Marakana

Unobtrusive JavaScriptVitaly Baum

This document discusses unobtrusive JavaScript and patterns for implementing it in web frameworks. It begins by outlining problems with server-side JavaScript generation and the proliferation of JavaScript frameworks. It then covers common patterns for unobtrusive JavaScript like double templating, just Ajax, and update panels. The document also explains how Rails implements unobtrusive JavaScript using drivers, data attributes, and remote forms. It concludes by discussing how these patterns and techniques could be adapted for ASP.NET MVC.

Anatomy of payment systems in Drupal 8Oleg Natalushko

This document summarizes the current state of payments in Drupal 8 and the Drupal Commerce 2.x payment system. It discusses common developer mistakes and outlines the planned payment gateway configuration entity and plugin architecture in Commerce 2.x. It also describes the Payment and Payment Offsite API modules, which implement an offsite payment workflow with IPN callbacks, result pages, and a simplified interface for payment methods.

Learn about Eclipse e4 from Lars Vogel at SF-JUGMarakana Inc.

San Francisco Java User Group hosted an event on April 13th, 2010 with Lars Vogel, a committer on the Eclipse e4 project, who gave a talk on the next generation of the Eclipse Platform. We had two speakers that evening, this is the first of the two presentations. This event was hosted by SUPINFO. Sponsored by TEKsystems, Guidewire Software, Sun, O'Reilly, JetBrains, and Marakana. Organized by Marakana. Video by Max Walker. Photography by Aleksandar Gargenta. http://www.sfjava.org/calendar/12296574/

FreshBooks APIBoris Mann

Practical PHP by example Jan Leth-KjaerCOMMON Europe

- This document provides an overview of various practical PHP examples that will be demonstrated, including data management with MySQL, file management, PDF creation, PayPal integration, and using SMS APIs. - Examples will show retrieving and displaying data from a database, allowing users to enter/update data, validating and updating the database. File management on the server and creating PDFs with embedded data will also be demonstrated. - Integrating PayPal payments standards and building PayPal forms to select invoices for payment processing is covered. Finally, using external SMS APIs to send text messages by making API calls with parameters is reviewed.

HTML5 e Css3 - 7 | WebMaster & WebDesignerMatteo Magni

Top 5 Magento Secure Coding Best PracticesOleksandr Zarichnyi

This document outlines the top 5 Magento secure coding best practices: 1) Validate all input as strictly as possible using validation libraries, 2) Use parameterized queries to prevent SQL injection, 3) Escape all user input to prevent XSS attacks, 4) Use CSRF tokens on forms to prevent CSRF attacks, and 5) Implement security headers to enable browser protections. It provides code examples for each practice and additional resources for learning about application security best practices.

Introduction to StratusForms #SayNoToInfoPathMark Rackley

This document introduces StratusForms, a lightweight alternative to InfoPath that allows building forms using HTML, CSS and JavaScript. Key points include: - StratusForms uses client-side code to build forms that can be customized and styled easily. - It works with SharePoint 2007-2013 and Office 365 to store form data in lists and promote fields. - Additional features include repeating sections, parent-child relationships, reporting, and field encryption. - Support and customization services are available, and a premium version with automated configuration is coming soon to the SharePoint Store. - The document demonstrates how to initialize a form, submit data, validate fields, and generate reports on form data.

PLAT-15 Forms Config, Customization, and ExtensionAlfresco Software

Apex & jQuery MobileChristian Rokitta

The document discusses using jQuery Mobile to create mobile web applications in Oracle Application Express, including why to use jQuery Mobile, its basic page structure and components, customizing styles and forms, and how jQuery Mobile is supported in newer versions of Application Express. It also provides code examples and demonstrations of creating mobile-friendly lists, buttons, and other elements in Application Express using jQuery Mobile.

WDE08 Designing for interaction with AjaxSatoshi Kikuchi

The document discusses the basics of Ajax and how it allows web pages to be more interactive by communicating with servers asynchronously in the background without reloading the entire page. It covers how Ajax uses the XMLHttpRequest object to make requests and discusses design patterns for progressive enhancement when adding Ajax functionality to enhance the user experience. User testing is recommended to ensure usability.

Escape from the automation hellNikita Simonovets

Почти каждая Test Automation команда прикладывает много усилий и времени, чтобы построить и отполировать свой Framework. Никто не нуждается в Framework в первую очередь. Вместо этого нужны быстрые, надежные и простые тесты, которые работают и обеспечивают качество для текущего процесса разработки. На это митапе @Nikita Simonovets расскажет, как можно построить хорошую автоматизацию и на какие готовые решения и подходы стоит обратить внимание. Agenda: • Whois Test Automation Engineer? • What is really WebDriver? • What is really Test Automation Framework? • Bad examples of Test Automation Solution • How to write more stable tests • Stairway to heaven: Selenide vs JDI

Top 10 HTML5 features every developer should know!Gill Cleeren

The document summarizes 10 key HTML5 features that every developer should know. It begins with an introduction and agenda listing the features to be covered, including new elements, data input and validation, canvas, SVG, audio and video, feature detection, drag and drop, geolocation, local storage, and the file API. For each feature, it provides details on the new capabilities in HTML5 and examples of how to implement the features in code.

HTML5 workshop, formsRobert Nyman

The document discusses new HTML5 form types, attributes, and elements. It provides examples of new input types like color, date, and range. It also covers new form attributes, validation methods and styles. Validation is improved but still has limitations. Styling is introduced for states like required, valid, invalid and focused using CSS pseudo-classes. Custom validation messages can be set but override the default checkValidity method.

Html5 inputsChris Love

Data entry is boring. Developing web forms is tedious and can be complicated. As AJAX heavy applications have become the standard of today’s web developers have relied on many third party plugins and libraries to add client-side value to data entry forms. Modern browsers implement many of these features natively, in many cases eliminating the need to load and maintain an application against a third party library. In this session I will review new input types, attributes, styling and validation techniques that should make you forget those third party libraries for your next project.

A Sensational Exposé With Bewildering DemonstrationsPeter Gasston

The document discusses HTML5 form validation constraints and APIs. It provides examples of how to add constraints like required fields, pattern matching, and value limits. It also demonstrates how to detect constraint validation support, check field and form validity, and access validation error messages through the validity API. The document is an introduction to HTML5 form validation features and constraints.

Accessible dynamic formsDylan Barrell

The document discusses accessible and valid dynamic forms with jQuery. It provides examples of code on GitHub for form accessibility fundamentals like labels, instructions, layout, and dynamism. It also covers common WCAG 2.0 success criteria around perceivable, operable, understandable and robust forms. Specific techniques are presented for labels, instructions, layout, controls, and validation fundamentals.

Web Forms People Don't Hatecliener

JavaScript - Chapter 14 - Form Handling WebStackAcademy

Form validation normally used to occur at the server, after the client had entered all the necessary data and then pressed the Submit button. If the data entered by a client was incorrect or was simply missing, the server would have to send all the data back to the client and request that the form be resubmitted with correct information. This was really a lengthy process which used to put a lot of burden on the server. JavaScript provides a way to validate form's data on the client's computer before sending it to the web server. Form validation generally performs two functions. Basic Validation − First of all, the form must be checked to make sure all the mandatory fields are filled in. It would require just a loop through each field in the form and check for data. Data Format Validation − Secondly, the data that is entered must be checked for correct form and value. Your code must include appropriate logic to test correctness of data.

Building & Breaking Web Forms with Quaid-JScliener

The document discusses building and designing web forms using Quaid-JS. It covers design patterns for forms like vertical labels and fields. It also discusses building forms with HTML5 attributes, validating forms early and often, embracing and extending HTML and DOM with custom input types, using data attributes, and adding custom validation with inline, on submit, and AJAX methods. Internationalization is supported by plug-in JavaScript files for different locales. The library is open source on GitHub and has been used on a live website.

HTML5 Forms - KISS time - FronteersRobert Nyman

This document summarizes new HTML5 form elements and attributes. It introduces new input types like color, date, and range. It also describes new form attributes like autocomplete, autofocus, and validation attributes. Styles are demonstrated for required, valid, invalid, and placeholder text. Issues with validation dialogs and international characters are discussed. The document encourages keeping forms simple and provides additional resources.

More Related Content

What's hot (14)

Efficient Rails Test Driven Development (class 4) by Wolfram ArnoldMarakana Inc.

Learn how to apply the test-first approach to all of your Rails projects. In this six class series, experienced Rails engineer and consultant, Wolfram Arnold applies his real-world perspective to teaching you effective patterns for testing. In this fourth of six classes, Wolf covers: - Refactoring code & tests, custom matchers - API Testing - Remote data setup - Cucumber for API testing & documentation ** You can get the video and source code from this presentation at: http://marakana.com/f/204 ** All six classes will be available online, so stay tuned! And be sure to check out marakana.com/techtv for more videos on open source training. Presented by: Wolfram Arnold, in collaboration with Sarah Allen, BlazingCloud.net Produced by: Marakana

Unobtrusive JavaScriptVitaly Baum

Anatomy of payment systems in Drupal 8Oleg Natalushko

Learn about Eclipse e4 from Lars Vogel at SF-JUGMarakana Inc.

FreshBooks APIBoris Mann

Practical PHP by example Jan Leth-KjaerCOMMON Europe

HTML5 e Css3 - 7 | WebMaster & WebDesignerMatteo Magni

Top 5 Magento Secure Coding Best PracticesOleksandr Zarichnyi

Introduction to StratusForms #SayNoToInfoPathMark Rackley

PLAT-15 Forms Config, Customization, and ExtensionAlfresco Software

Apex & jQuery MobileChristian Rokitta

WDE08 Designing for interaction with AjaxSatoshi Kikuchi

Escape from the automation hellNikita Simonovets

Top 10 HTML5 features every developer should know!Gill Cleeren

Efficient Rails Test Driven Development (class 4) by Wolfram ArnoldMarakana Inc.

Unobtrusive JavaScriptVitaly Baum

Anatomy of payment systems in Drupal 8Oleg Natalushko

Learn about Eclipse e4 from Lars Vogel at SF-JUGMarakana Inc.

FreshBooks APIBoris Mann

Practical PHP by example Jan Leth-KjaerCOMMON Europe

HTML5 e Css3 - 7 | WebMaster & WebDesignerMatteo Magni

Top 5 Magento Secure Coding Best PracticesOleksandr Zarichnyi

Introduction to StratusForms #SayNoToInfoPathMark Rackley

PLAT-15 Forms Config, Customization, and ExtensionAlfresco Software

Apex & jQuery MobileChristian Rokitta

WDE08 Designing for interaction with AjaxSatoshi Kikuchi

Escape from the automation hellNikita Simonovets

Top 10 HTML5 features every developer should know!Gill Cleeren

Similar to form_validation_with_html5 (20)

HTML5 workshop, formsRobert Nyman

Html5 inputsChris Love

A Sensational Exposé With Bewildering DemonstrationsPeter Gasston

Accessible dynamic formsDylan Barrell

Web Forms People Don't Hatecliener

JavaScript - Chapter 14 - Form Handling WebStackAcademy

Building & Breaking Web Forms with Quaid-JScliener

HTML5 Forms - KISS time - FronteersRobert Nyman

HTML5 Forms OF DOOMStephanie Hobson

Data validation in web applicationssrkirkland

Knolx j query-form-validation-slidesKnoldus Inc.

The jQuery Form Validation Plugin allows for simple client-side form validation. It includes a set of built-in validation methods like required, email, minlength, and maxlength. The goal of the plugin is to improve the user experience when filling out forms by providing validation and error messages. It is meant to be used alongside server-side validation for security. The document provides an example of using the required method and discusses integrating the plugin with the Play Framework.

Html5 Forms in Squiz Matrix - Dave LetoreySquiz

HTML5 Mullet: Forms & Input ValidationTodd Anglin

Todd Anglin gave a presentation on HTML5 forms and input types. He discussed the new input types available like email, url, number and date/time. He demonstrated how to use these new input types and attributes like placeholder, required and pattern. Anglin also covered customizing the browser rendered inputs using shadow DOM and styling validation states with CSS. For older browsers without native support, he recommended polyfilling the new functionality with JavaScript.

html 5 new form attributePriyanka Rasal

HTML5 includes many new form features to improve the consistency and capabilities of web forms. Some key additions include new form controls like number, range, date, and color pickers. It also adds new attributes to improve the user experience, such as placeholder text, autofocus, restricting input values with min/max, and step controls. Browsers can now perform native form validation using features like required fields, input type validation, and custom patterns. However, support varies across browsers and older browsers may not support all new features.

html forms 2.pptxAmanRaja20

Hassliebe Onlineformulare, Enhance your Form for better UXPeter Rozek

Formulare und das Internet verbindet eine ewige Hassliebe. Zum einen sind sie notwendig und zum anderen scheitert die Conversion Rate nicht selten an einer schlechten Usability. Responsive Webdesign hat die Situation nicht einfacher gemacht. Verschiedene Formfaktoren und Interaktionsmechaniken sind zu berücksichtigen. Einzelne Formulare oder Formularstrecken müssen für den Nutzer verständlich bleiben und bei falschen Eingaben muss das System eine gewisse Fehlertoleranz erkenn und Kontextbezogene Hilfen anbieten. Zusätzlich gilt für unterschiedliche Touchpoints das Formulare scalable und usable sind. Der Vortrag zeigt mit welchen HTML5 und CSS3 Elementen Formulare technisch Robust werden und eine positive User Experience adressieren. Neben grundlegenden Usability Guidelines wird auch ein besonderes Augenmerk auf den Anwendungsfall gelegt. Zielgruppenorientierte Formulargestaltung braucht mehr als die Einbeziehung grundlegender Usability Richtlinien. Valide Use Cases auf Basis von Customer Journey Maps oder Touchpoint Matrix helfen den Fokus auf wesentliche Aspekte zu lenken.

Form using html and java script validationMaitree Patel

This document discusses form validation using HTML and JavaScript. It begins with an introduction to HTML forms, form elements like <input>, and common form controls such as text, checkbox, radio buttons and selects. It then covers JavaScript form validation, explaining why validation is needed and providing an example that validates form fields like name, email and zip code on submit. The example uses JavaScript to check for empty fields and invalid email and zip code formats before allowing form submission.

Web topic 22 validation on web formsCK Yang

1. The document discusses form validation using JavaScript. It describes form validation as checking that a form has been filled in correctly before submission. 2. There are two main methods of form validation: client-side (using JavaScript) and server-side (using CGI scripts or ASP). Client-side validation is easier to implement but less secure, while server-side is more secure but more complex. 3. An example is given demonstrating client-side form validation using JavaScript. The validate_form() function checks if the contact name field is empty, and alerts the user if so before allowing submission.

Forms with html5Suvarna Pappu

Forms with html5 (1)Anada Kale

HTML5 includes many new features for forms that make them easier to create and more powerful. It introduces new form controls like number, range, date, time, color pickers as well as new attributes for validation and user experience improvements. While support is still limited, as browsers implement these new standards forms will work more consistently across devices and enable more semantic data collection.

HTML5 workshop, formsRobert Nyman

Html5 inputsChris Love

A Sensational Exposé With Bewildering DemonstrationsPeter Gasston

Accessible dynamic formsDylan Barrell

Web Forms People Don't Hatecliener

JavaScript - Chapter 14 - Form Handling WebStackAcademy

Building & Breaking Web Forms with Quaid-JScliener

HTML5 Forms - KISS time - FronteersRobert Nyman

HTML5 Forms OF DOOMStephanie Hobson

Data validation in web applicationssrkirkland

Knolx j query-form-validation-slidesKnoldus Inc.

Html5 Forms in Squiz Matrix - Dave LetoreySquiz

HTML5 Mullet: Forms & Input ValidationTodd Anglin

html 5 new form attributePriyanka Rasal

html forms 2.pptxAmanRaja20

Hassliebe Onlineformulare, Enhance your Form for better UXPeter Rozek

Form using html and java script validationMaitree Patel

Web topic 22 validation on web formsCK Yang

Forms with html5Suvarna Pappu

Forms with html5 (1)Anada Kale

form_validation_with_html5

1. Significant Work. Extraordinary People. SRA. Form Validation with HTML5 Ryan R. Williams Date: 07/09/2013

2. 2Significant Work. Extraordinary People. SRA. What? • HTML5 client-side <form> validation • New <input> types and attributes make it easy • One drawback … you still need to perform server side validation

3. 3Significant Work. Extraordinary People. SRA. HTML 4 • Client-side validation requires JavaScript • Custom code, jQuery validate, etc. • Extra work to give the user optimal UX

4. 4Significant Work. Extraordinary People. SRA. HTML5 • New <input> types and attributes • Browsers have built-in client-side validation

5. 5Significant Work. Extraordinary People. SRA. For Example

6. 6Significant Work. Extraordinary People. SRA. Required fields <input type=“text” required>

7. 7Significant Work. Extraordinary People. SRA. Regex with pattern attribute <input type=“text” required pattern=“(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)dd” placeholder=“mm/dd/yyyy”>

8. 8Significant Work. Extraordinary People. SRA. Other Validations <input type=“email” required placeholder=“Enter your email”> <input type=“url” required placeholder=“Website”> <input type=“number” value=“1” min=“1” max=“10” required>

9. 9Significant Work. Extraordinary People. SRA. HTML5 Forms + CSS3 • New pseudo classes better for UX • Visual cues and feedback to guide the user

10. 10Significant Work. Extraordinary People. SRA. :required and :optional label + input:required { background:hsl(180, 50%, 90%); } label + input:optional { border:1px dotted hsl(180, 50%, 90%); background:hsl(300, 50%, 90%); }

11. 11Significant Work. Extraordinary People. SRA. :valid and :invalid label + input:valid, label + input:in-range { background:hsl(120, 50%, 90%); border-color:hsl(120, 50%, 90%); } label + input:invalid, label + input:out-of-range { background:hsl(0, 50%, 50%); border-color:hsl(0, 50%, 90%); }

12. 12Significant Work. Extraordinary People. SRA. No validation? <form novalidate> … </form>

13. 13Significant Work. Extraordinary People. SRA. Cross browser? Firefox? Yes. (4.0+)  Safari? Yes. (4.0+)  Chrome? Yes. (3.0+)  Opera? Yes. (10.0+)  iPhone? No.  Android? No.  Internet Explorer? Something like that... (10.0+)  http://diveintohtml5.info/forms.html#validation

14. 14Significant Work. Extraordinary People. SRA. JavaScript fallback… • Modernizr library for HTML5 detection //only polyfill forms, if placeholder or autofocus are not supported if(!Modernizr.input.placeholder || !Modernizr.input.autofocus){ jQuery.webshims.polyfill('forms'); }

15. 15Significant Work. Extraordinary People. SRA. Further info • A Form of Madness http://diveintohtml5.info/forms.html • Forward Thinking Form Validation http://alistapart.com/article/forward-thinking-form-validation • New Form Features in HTML5 http://dev.opera.com/articles/view/new-form-features-in-html5/ • Modernizr JavaScript Library http://modernizr.com/

16. 16Significant Work. Extraordinary People. SRA. Can also be used in… • In browser extensions • Greasemonkey scripts • Prototyping/designing in the browser

17. 17Significant Work. Extraordinary People. SRA. Questions?

form_validation_with_html5

Recommended

More Related Content

What's hot (14)

Similar to form_validation_with_html5 (20)

form_validation_with_html5