Why is novalidate on form tag being ignored?

1,561 views
Skip to first unread message

Kyle Crabtree

unread,
May 29, 2014, 3:33:59 PM5/29/14
to chromiu...@chromium.org
I'm having an issue with Chrome (could be all webkit, only tried Chrome for the time being) with HTML5 form validation.  in the <form> tag I have the "novalidation" attribute set, but Chrome not only is not letting me submit a form, but it's keeping data from being viewed; not populated, but viewed.  I made a fiddle to show the issue.  https://dotnetfiddle.net/zIMk99

The particular fiddle is using MVC, but from what I can tell, that had no impact on my testing.  My actual website is Webforms .NET 4.5 and I got the same result.

If on the <input> box I put type="number" (to bring up the number pad for my social security field on mobile devices) and I allow dashes in my SSN field, Chrome will not let me submit the form.  When anything accesses the "value" it returns empty string.  If I remove the type="number", it goes back to working fine.

I've tried this in IE11 and both the type="number" and type="text" work as expected; as does my actual validation I put in the page.

Here are the steps to replicate:
  1. Go to my fiddle: https://dotnetfiddle.net/zIMk99
  2. When it loads, do an inspect element on the textbox.
  3. You should see value="123-12-1234" for the input field
  4. You will see the field is blank.
  5. If you set the text to "123121234", it will allow it to continue.
  6. My regex does allow for dashes and spaces and does work appropriately when type="tel" or type="text" (tel because it allows dashes).

Any other information you need, please let me know. I hope it's just an oversight on my part.

PhistucK

unread,
May 29, 2014, 4:55:39 PM5/29/14
to Kyle Crabtree, Chromium HTML5
While the behavior does indeed seem strange, you are not supposed to use type="number" for non numbers (dashes).
A simple page with a number input would suffice to reproduce -
data:text/html,<!doctype html><input type="number" value="1-1" id="a"><script>console.log(document.getElementById("a").value)</script>


The specification says that the value attribute must be a floating point number. While the specification says that setting an invalid value (a non floating point number value) should set the empty string instead, it says that getting the value should just get the value.
http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#number-state-(type=number)
http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#dom-input-value-value

​​
It looks like Chrome went too far here. You can file an issue at crbug.com if you cannot find one already and post the link here so we could triage it.


☆PhistucK


--
You received this message because you are subscribed to the Google Groups "Chromium HTML5" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-html...@chromium.org.
To post to this group, send email to chromiu...@chromium.org.
Visit this group at http://groups.google.com/a/chromium.org/group/chromium-html5/.
For more options, visit https://groups.google.com/a/chromium.org/d/optout.

Kyle Crabtree

unread,
May 30, 2014, 4:36:11 AM5/30/14
to chromiu...@chromium.org
I agree with you that type="number" should not be used with dashes.  Sadly, iOS and Android picked up that type="number" means they should pull up a numeric keypad (including other items like period, comma, hyphen, etc).  iOS used to allow type="text" and then set a pattern, but it was one specific patter in which Chrome would treat differently since the pattern didn't include dashes.  So it seems that the easiest solution is that Chrome just allow whatever I put in there if I have novalidate turned on, or, even better, an option for the input boxes themselves to ignore any html5 specific validation for special cases as these.  Maybe make a new item for "noinputvalidation".  

For now, I suppose I have to use type="tel" as the html5 doc clearly states it allows free form typing in that one.  There really should be some type of form that is a "numeric entry" that is not a number since mobile devices are getting more and more popular now, it would be nice to customize the user's experience as much as possible.

PhistucK

unread,
May 30, 2014, 4:47:33 AM5/30/14
to Kyle Crabtree, Chromium HTML5
Minus signs (dashes), commas and periods are probably allowed for number negativity, or locale dependent floating point separators, so I guess this is the reason why type=number allows dashes.

I think there is an inputmode attribute that may give you the result you want, with type=text. I am not sure, though (and I am also not sure it is supported cross browser, but maybe having it along with patten would do the trick).

Can you, please, file an issue at crbug.com for value returning an empty string? Post it here when you are done.


Thank you!


☆PhistucK


--

Kyle Crabtree

unread,
May 30, 2014, 8:33:09 AM5/30/14
to chromiu...@chromium.org, crabtr...@gmail.com
Bug posted.  FYI - iOS dropped support of type=text with a pattern in iOS7 and Android never picked that one up.  If I did use what they wanted for my field, I would have had to put an all numeric pattern, which Chrome wouldn't have liked.  Forces everyone to use "tel" for now until someone decides to make something better I suppose.

Reply all
Reply to author
Forward
0 new messages