Creating HTML5 Attributes with the Bindings

[johnpapa]

Have you considered adding the HTML5 validation attributes to the HTML automatically? For example, instead of adding a required validation in code using extend and then also adding required to the HTML INPUT element, it would be nice to do it just in code. This would make it easier to read validation from metadata and create in in javascript. Then we can set up CSS classes for input:required

[ericmbarnard]

@johnpapa

Interesting suggestion. I'd thought about this at first, but wasn't sure how folks would feel about this lib playing with their html. Since you bring it up, though, this would be easy enough to add via an option.

I'll take a crack at it and see what I can do.

Sorry for the delay - I was out on a project, and am now getting caught back up.

[ericmbarnard]

@johnpapa

this should now work if you change your config options to include:

config.writeInputAttributes: true

[johnpapa]

Thanks. I like making this an option. I am using this library in a SPA course for Pluralsight and one thing that I felt was confusing is whether I should just use the ko.validation or also hard code in the HTML5 attributes for validation. I like both being there so if the browser respects the attributes we get the goodness that comes with it (and the CSS psuedo selectors for styling). But if it doesn't, then we still get the out of the box ko.validation. The issue was I did not want to set the validation in the model AND in the HTML declaratively. They could obviously get out of synch. So having this option is valuable, IMO.

Thanks for doing this ... I'll be testing it over the next week and providing feedback

[ericmbarnard]

That sounds great John, and yes I completely agree-

I'm glad to address anything you run into this week with the library. If you find any resources on other HTML5 form attributes that are being supported cross-browser - let me know. I've been on MDN and W3C trying to make sure I'm covering the spec.

Also, based upon your motivation for this addition, what do you think about adding some hooks in the library to take advantage of the setCustomValidity api?

Stephen has a good example of it here:
http://stephenwalther.com/archive/2012/03/13/html5-form-validation.aspx

[johnpapa]

Just tested it briefly. It added required="required" to the input element. This works, but I am trying to track down if that is the recommended syntax for required. I had thought it was simply the existence of the required attribute (with no value). Here is the spec. http://www.w3.org/TR/2011/WD-html5-20110525/common-input-element-attributes.html#the-required-attribute

Thoughts?

[johnpapa]

Eric - Its working with my "required" examples, but the pattern examples I am using are not working. Do you have some tests for those? It is inserting the patter attribute and the pattern specified in the ko.validation rule, but its always showing up as invalid via the invalid pseudo selector. I'll keep looking, but wanted to get your eyes on it too

[ericmbarnard]

I'm looking at it currently. Shouldn't be too difficult to get figured out with the unit tests I have.

As far as the required="required' goes... I've seen it both ways and is one of my frustrations with the spec. Currently I am doing $(element).attr('required', true); , and so I assume that the browser is then changing that to be what you're seeing.

[johnpapa]

Update: Its running the pattern validation rule twice in your code. line 503. The first time the regex is correct and it all passes true. The second time the regex is surrounded by quotes and it fails. Notice the quotes around the regex on the second pass.

I'm not sure why its executing twice nor why its putting the quote around ... sitll poking.

[ericmbarnard]

I think I figured it out. Regular Expressions can't be converted back and forth from strings (well, technically they can, but not by jQuery).

The spec says that the pattern must be able to be "compiled as a JavaScript regular expression with the global, ignoreCase, and multiline flags disabled" - so the browser is compiling the pattern into a RegExp. Thus we also can't use the literal RegExp syntax of /blah/ . The pattern attribute value will essentially become: "/pattern value/". I found that the source property of a RegExp object gives that exactly, so I added that logic to the code.

I'm sure there are other "gotchyas" with this, but I'll work through them and add them to the unit test suite.

[johnpapa]

That fixed it for the pattern in HTML5. Will continue to test, but it looks good right now. I am only using required and pattern in the course. Looking forward to seeing more and more folks using your lib. Great job and thanks!

Looking forward to seeing the update on NuGet too.

Closing the issue