Form Validation and Other Future HTML5 Form Enhancements - 11

Play Form Validation and Other Future HTML5 Form Enhancements - 11
Sign in to queue


This video looks toward new HTML5 form features used in Internet Explorer 10 and later. First up is a look at using new input elements and attributes for creating richer forms. Bob then demonstrates how built-in validation works and how it can reduce the amount of JavaScript required by web pages hosting forms.

Download the source code for Form Validation and Other Future HTML5 Form Enhancements


HTML 5, HTML5, IE 10



The Discussion

  • User profile image

    Hey Bob When I tried to validate the page created in this lesson, I get the following errors:

    Error: Attribute required not allowed on element input at this point.

    From line 48, column 37; to line 48, column 88

    <p><label><span>Range input: </span><input type=range name=rangeInput required value=42></label>By default....</p>

    Warning: Attribute 5 is not serializable as XML 1.0.

    From line 68, column 30; to line 68, column 55

    <p><label><span>step: </span><input type=number step 5></label>


    Any ideas what they are talking about here?

  • User profile image

    @s3curityConsult: Sorry I lost track of this one!  Could you post your code?  Also, can you try *my* code (download on this page) and see if you get the same errors).  We can go from there.  Sorry for the delay!

  • User profile image

    @s3curityConsult: This may or may not be correct as I am still learning but from my understanding of the HTML5 documentation, the required attribute is not supported for the range type as it will always contain a value even when not specified. As for your second problem the = is missing between step and 5.

    Hope this helps.

  • User profile image

    Hi Bob,

    These videos are / were extremely helpful. About the input type=number, chrome supported it better than IE10. It shows a numeric up/dowm control with set of two arrows at the end of the text box, to increment and decrement numbers.

  • User profile image

    opening thread


  • User profile image

    Hey bob can u tel me for set the screen resolution for all type of screen as well as mobile screen which code i have to write in my css file??

  • User profile image

    @Chirag: Off the top of my head?  No.  HOWEVER if you watch the very last video in this series, I talk about CSS Frameworks, especially Bootstrap by Twitter which will take care of those sorts of concerns for you "magically".  Smiley

  • User profile image

    Hi Bob, great videos. A couple of suggestions I'd make:
    1. after you have shown a required field type, make it not required so that you wouldn't have so much repetitive form entry
    2. Add your new examples at the top of the form to require less scrolling.

    These are definitely 'nits' as I am enjoying the presentation.

  • User profile image

    @Jerry: Great feedback!  You're absolutely right.  These are legit nits.  Smiley  Thanks Jerry -- bt

  • User profile image

    for some funny reason the options from 

    aren't showing except on FF . I use IE10

  • User profile image

    @mobell32: Hmm... Take a look at this page on IE 10:

    ... it works for me.  Are you sure you / I have them typed in correctly?

  • User profile image

    This is a great series so far, I have recommended it and your series on JavaScript to friends that are interested in getting into web development.

    As a side note, I found something interesting about the input type URL.  Apparently it will submit as long as you have the http://.  I only found this because Opera will automatically insert http:// for you.  Apparently the type does not check for a proper URL that contains .com/net/org...  I checked this in IE10, Chrome, and Opera.  Opera was the only one that automatically inserted the http:// for me.

  • User profile image

    Hi Bob,

    This is a great video series! However, I do not understand why the <span> element is used in this tutorial. Can you please explain its purpose in the context of how it is used here?

    Thank you,

    - Jacob

  • User profile image

    @SheldonS: Ah ... interesting.  Thanks for posting.

    @Jacob: I haven't re-watched this video, but if you can give me a specific time marker (like @5:45) I may be able to explain.  I'm guessing (without looking) that it is merely as a way to style some specific part of the document.

  • User profile image

    Opening thread

  • User profile image

    Hey Bob,

    How come you dont enclose all the attribute values in double-quotes like the standard states? Is there something I missed?

  • User profile image

    @saikatdas0790: Where did you read that?  I'm looking at this link:



    Attribute values can contain text and character references, with additional restrictions depending on whether they are unquoted attribute values, single-quoted attribute values, or double-quoted attribute values. Also, the HTML elements section of this reference describes further restrictions on the allowed values of particular attributes, and attributes must have values that conform to those restrictions.

    In the the HTML syntax, attributes can be specified in four different ways:

    empty attribute syntax
    unquoted attribute-value syntax
    single-quoted attribute-value syntax
    double-quoted attribute-value syntax

  • User profile image

    Oh, alright! When I saw you NOT using double quotes, I googled and came across this -

    Hence, the question. Thanks for pointing that out!

  • User profile image

    Reference to 4:37 time in lesson video.

    Your result: This is a required field(no period) bubble pops down from the bottom left of the box when submit is clicked.

    My result: Please fill out this field. Pops down from bottom left of the box after submit is pushed.

    I'm using an I-Mac running Mavericks and my browser is Firefox. Up to now everything has looked exactly like Bob's results even though he uses Windows and Internet Explorer browser.

    Not a big deal I guess just an example of how the same code may look a tad different on different browsers.

  • User profile image

Add Your 2 Cents