Entries:
Comments:
Posts:

Loading User Information from Channel 9

Something went wrong getting user information from Channel 9

Latest Achievement:

Loading User Information from MSDN

Something went wrong getting user information from MSDN

Visual Studio Achievements

Latest Achievement:

Loading Visual Studio Achievements

Something went wrong getting the Visual Studio Achievements

Form Validation and Other Future HTML5 Form Enhancements - 11

Download

Right click “Save as…”

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

Tags:

Follow the Discussion

  • 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?

  • @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!

  • @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.

  • 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.

  • Golnazgolnazal HEY HEY HEY

    opening thread

     

  • ChiragChirag

    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??

  • @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

  • JerryJerry

    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.

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

  • for some funny reason the options from 

    datalist
    aren't showing except on FF . I use IE10

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

    http://www.quirksmode.org/html5/tests/inputs_misc.html

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

  • 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.

  • JacobJacob

    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

  • @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.

  • Greg Duncangduncan411 It's amazing what a professional photographer can do...

    Opening thread

  • Hey Bob,

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

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

    http://www.w3.org/TR/html-markup/spec.html#syntax-attributes

    FTA:

     

    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

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

    http://www.w3schools.com/html/html_attributes.asp

    Hence, the question. Thanks for pointing that out!

  • IanIan

    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.

Remove this comment

Remove this thread

close

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.