locked
HTML5 validations like email, required etc not working in Metro Apps

    Question

  • Hi All,

    I have just started development in Metro Apps using HTMl5/Javascript.

    I have one form control in which there are input controls like "email", "text", "password" with required validation also.

    On button click i can't see any error notification. Please let me know are they available here or not?

    Is there any other way for these validation?

    <body>
    <form name="myForm">
    First name: <input type="text" required name="fname">

    Email: <input type="email" name="txtemail">

    <input type="submit" value="Submit">
    </form>
    </body>

    Wednesday, May 02, 2012 12:09 PM

Answers

  • Sudhir,

    I dropped your code into a blank application and it works great!

    Here is my HTML:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Application3</title>
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
        <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
        <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
    
        <!-- Application3 references -->
        <link href="/css/default.css" rel="stylesheet">
        <script src="/js/default.js"></script>
    </head>
    <body>
        <form name="myForm">
     First name: <input type="text" required name="fname">
     
    Email: <input type="email" name="txtemail">
     
    <input type="submit" value="Submit">
     </form>
     
    
    </body>
    </html>
    

    What is different in your code?

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, May 02, 2012 3:57 PM
    Moderator
  • PS,

    Rather than a submit button you may find CSS more helpful using the :valid and :invalid pseudo-classes (which also work in Metro style apps).

    http://msdn.microsoft.com/library/hh673544.aspx#custom_validation_error_messages

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, May 02, 2012 4:01 PM
    Moderator

All replies

  • Sudhir,

    I dropped your code into a blank application and it works great!

    Here is my HTML:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Application3</title>
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
        <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
        <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
    
        <!-- Application3 references -->
        <link href="/css/default.css" rel="stylesheet">
        <script src="/js/default.js"></script>
    </head>
    <body>
        <form name="myForm">
     First name: <input type="text" required name="fname">
     
    Email: <input type="email" name="txtemail">
     
    <input type="submit" value="Submit">
     </form>
     
    
    </body>
    </html>
    

    What is different in your code?

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, May 02, 2012 3:57 PM
    Moderator
  • PS,

    Rather than a submit button you may find CSS more helpful using the :valid and :invalid pseudo-classes (which also work in Metro style apps).

    http://msdn.microsoft.com/library/hh673544.aspx#custom_validation_error_messages

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, May 02, 2012 4:01 PM
    Moderator
  • In my form i was using closing tag with all inputs i.e "/>" and in your code it is ">".

    Thanks Again

    Thursday, May 03, 2012 5:05 AM