Skip to main content

Home/ HTML5 development/ Group items tagged validation

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
Vernon Fowler

HTML5 Form Validation - Showing All Error Messages - 0 views

www.tjvantoll.com/...ion-showing-all-error-messages

forms usability errors validation HTML5

shared by Vernon Fowler on 10 Apr 18 - No Cached
  • an :invalid pseduoselector that can be used to select all elements with validation errors
  • only give an error for the first field
  • showing the users only the first error message is bad
  • ...2 more annotations...
  • Browsers that support HTML5 form validation have one thing in common; if a <form> is submitted and has errors on multiple fields, the browser will only display the first error to the user.
  • instead of listening for submit on the <form>, I instead listen for a click on the <input type="submit">. Since the user is also able to submit the form pressing enter in text inputs, I attach a keypress listener to them to ensure the same logic runs.
Vernon Fowler

Can I use... Form validation - 0 views

caniuse.com/#feat=form-validation

html5 forms validation CSS pseudo

shared by Vernon Fowler on 15 Feb 18 - No Cached
  • Vernon Fowler on 15 Feb 18
     
    What HTML5 features are currently supported by each browser
Vernon Fowler

:required | CSS-Tricks - 0 views

css-tricks.com/...required

forms validation html5 pseudo input attributes

shared by Vernon Fowler on 15 Feb 18 - No Cached
  • The :required attribute works on radio buttons. If you put required on one radio button (or all), that particular group of radio buttons will be required. On checkboxes, makes each individual checkbox required (to be checked).
Vernon Fowler

HTML5 forms input types | HTML5 Doctor - 0 views

html5doctor.com/html5-forms-input-types

html HTML5 forms input data types browser mobile

shared by Vernon Fowler on 05 Mar 13 - No Cached
  • Once more, the iPhone recognises type="tel", only this time it goes one step further and completely changes the keyboard to the standard phone keyboard, as shown on the left in Figure 6. In addition to the iPhone, some Android devices (such as HTC Desire, shown on the right in Figure 6) also display a numeric keyboard for type="tel". That’s pretty handy, don’t you think? Nice, big keys for entering a phone number help you to get that big, nasty form completed quickly.
  • In contrast to Opera’s implementation, the iPhone (Figure 8) and some Android devices (such as HTC Desire, shown on the right in Figure 6-13) simply render the field as a standard text box but optimize the keyboard for easy input.
  • Chris’ technique may soon become absolete though with the introduction of the inputmode attribute. The attribute, recently added to the specification will allow users to specify the type of input mechanism that is most useful for users. When implemented, you will be able to choose between numeric, latin, email, or kana input modes.
  • ...3 more annotations...
  • To make the iPhone render with the standard telephone keypad as we saw for type="text" Chris Coyier, of CSS Tricks devised a little hoax you can use. Rather than using type=”number”, use a standard type="text" input and add a pattern attribute that accepts only numbers, as shown below. This solution isn’t ideal but if you think it could be useful, Chris has put a short video together showing it in action. <input type="text" pattern="[0-9]*" name="shoe-size">
  • There are dedicated keys for the @ and . characters to help you complete the field more efficiently. As we discussed with type="search", there is no downside to using type="email" right now. If a browser doesn’t support it, it will degrade to type="text". And in some browsers, users will get a helping hand.
  • The url input type, as you might expect, is for web addresses. You can use the multiple attribute to enter more than one URL. Like type="email", a browser will carry out simple validation on these fields and present an error message on form submission. This is likely to include looking for forward slashes, periods, and spaces, and possibly detecting a valid top-level domain (such as .com or .co.uk). Use the url input type like so: <input type="url" name="url" required>
Vernon Fowler

- HTML: Hypertext Markup Language | MDN - 0 views

developer.mozilla.org/...number

forms HTML5

shared by Vernon Fowler on 02 Oct 19 - No Cached
  • A string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max).
  • <input type="number"> elements do not support use of the pattern attribute for making entered values conform to a specific regex pattern.
  • inputs of type number support these attributes
  • Vernon Fowler on 02 Oct 19
     
    " elements of type number are used to let the user enter a number. They include built-in validation to reject non-numerical entries. The browser may opt to provide stepper arrows to let the user increase and decrease the value using their mouse or by simply tapping with a fingertip."
Vernon Fowler

HTML5 and Search Engine Optimisation (SEO) | HTML5 Doctor - 0 views

html5doctor.com/seo-search-engine-optimisation

html5 seo search engine optimisation search semantic

shared by Vernon Fowler on 10 Dec 12 - No Cached
  • The Doctors’ advice on SEO is to follow Google’s time-honoured guidelines: write valid, cross-browser, accessible HTML, don’t misuse markup or “cloak” with CSS, make a site with a clear hierarchy and text links, and write good content:
Vernon Fowler

How You Can Use HTML5 Custom Data Attributes and Why - SitePoint - 0 views

www.sitepoint.com/e-html5-custom-data-attributes

html custom data css HTML5 Javascript

shared by Vernon Fowler on 24 Mar 17 - No Cached
  • Besides the data- prefix, the name of a valid custom data attribute must contain only letters, numbers, hyphen (-), dot (.), colon (:) or underscore (_). It cannot contain capital letters.
  • I recommend you use this method for quick prototypes rather than a production website, not least because CSS-only tooltips are not fully accessible.
Vernon Fowler

HTML5 Tutorial - Web form 2.0 - 0 views

www.html5tutorial.info/html5-webform2.php

html5 forms validation web

shared by Vernon Fowler on 15 Feb 18 - No Cached
  • New Input attributes <input type="text" "new input attribute"/> Placeholder Autofocus Required
  • New input types <input type="new input type"/> Search Email, URL and Phone
  • Number as Spinner
Vernon Fowler

HTML Standard - 0 views

html.spec.whatwg.org/...interaction.html

shared by Vernon Fowler on 19 Sep 19 - No Cached
  • The value of input elements whose type attributes are in the Text, Search, URL, or E-mail states and that are mutable (i.e. that do not have the readonly attribute specified and that are not disabled).The value of textarea elements that do not have a readonly attribute and that are not disabled.
    • Vernon Fowler
      Vernon Fowler on 19 Sep 19
       
      Note the input types that we can set spellcheck="false" include: email url search text
  • Otherwise, if there is an ancestor element with a spellcheck content attribute that is not in the default state, then: if the nearest such ancestor's spellcheck content attribute is in the true state, then checking is enabled; otherwise, checking is disabled.
  • User agents should take into account the other semantics given in the document when suggesting spelling and grammar corrections. User agents may use the language of the element to determine what spelling and grammar rules to use, or may use the user's preferred language settings. UAs should use input element attributes such as pattern to ensure that the resulting value is valid, where possible.
1 - 10 of 10
Showing 20▼ items per page