I'm using the HTML Validator firefox add-on and when I go to the home page of http://knockoutjs.com/, I get warnings about the data-bind attribute (for the Live Example):
Examples:
<select> proprietary attribute "data-bind"
<button> proprietary attribute "data-bind"
I also get errors regarding the data-bind attribute when submitting the URL at http://validator.w3.org/.
I know this html attribute is used by knockout.js to do some data binding, but can we conclude that this approach does not follow the HTML specification? Does knockout.js follow the spirit of valid HTML markup?
They are HTML 5 custom attributes. Try to validate against HTML 5 specs and you should get an ok on the validation.
But since long you have been able to use custom attributes as you see fit although it may have violated strict HTML 4 specs.
Related
I am using the w3 include for my footer on each page. The pages loads fine and everything works great except when I run the code through https://validator.w3.org/ for validation I am getting this error:
"Error: Attribute w3-include-html not allowed on element div at this point."
<!--FOOTER-->
<div w3-include-html="../includes/footer.html"></div>
<!--Include HTML Files-->
<script>
w3.includeHTML();
</script>
Is the w3 include not widely supported? Should I be doing this with PHP or asp.net? or ajax?
You are probably using a script offered by w3schools.com. Note that w3schools has nothing to do with W3C. It’s just a custom JavaScript that makes use of an invalid attribute which likely gets replaced after the JS got executed.
The W3C HTML validator doesn’t execute JavaScript, so it doesn’t see the document after the JS replaced the attribute.
Possible solutions:
If you want to validate your HTML after the JavaScript got executed, you could open your page in a browser, mark everything, open the source code for the selection, and copy-paste this markup into the W3C validator.
If you just want to have a valid document before/without executing the JavaScript, you could change the script to use a data-* attribute, e.g., data-include-html.
If you want to support users and bots/services that don’t execute JavaScript, you shouldn’t rely on JavaScript. Using a server-side programming language (like PHP) could help here, but (depending on your use case) you could also just generate plain static HTML files, e.g., with the help of a static site generator.
To build a very simple web app for my company I'm evaluating some web frameworks, including PrimeFaces.
One strict requirement is the accessibility, and the fact that the HTML must be valid (checked against W3C Validator).
I've played a bit with the examples and I've noticed that the HTML rendered is not valid. The invalid block is the following:
<input name="javax.faces.ViewState" id="javax.faces.ViewState" value="2042368857675116551:8104174386673838460" autocomplete="off" type="hidden">
and the reason is:
line 74 column 159 - Errore: Attribute autocomplete not allowed on element input at this point.
So, can I perform some action on Primefaces in order to render valid HTML code? I didn't go deep into Primefaces, but I guess I have little control over how controls are rendered. Has anyone experience on this problem (validity of HTML rendered by PF) and would like to share it?
Thanks
The viewstate is not something that PrimeFaces adds to your rendered html but the jsf implementation. If you use mojarra there are some parameters that you can set to tune things (not tested this myself, just did some simple googling for you (hint, hint)).
See in How to let JSF render conform XHTML 1.0 strict?
I wanted to understand the meaning of novalidate directive usage in form tag, especially when used to validate the form.
Thanks
It prevents the browser's native validation to kick in i.e form data will not be validated upon submission. Examples include input where type='email'
Note that it is not Angular's directive. It is HTML 5 attribute. Read more about it here
novalidate attribute is used to disable browser's native form validation.
You can use it when you need do your own AngularJS custom validation.
You can use the same ones used by the HTML 5 specification in Angular,so you can add the novalidate attribute to the form element, which tells the browser not to use its native validation. Because different browsers have different implementation validations. Since Angular get validation itself, the browser don't need to do validation implementation.
I need to verify using Selenium (or similar framework) that certain HTML content/items are on the page using known unique identifiers.
I have control over the generation of the HTML, so I will mark the HTML tags with an attribute, but sometimes the usual candidates of id, name etc aren't available for me to use.
Is there an industry standard for such an attribute?
If not, anyone have any good suggestions?
The attribute shouldn't collide with any known attributes of any HTML elements or affect the web experience/behaviour (I don't care if someone reads the HTML source and sees it).
Some ideas I have are:
trace
debug
uid
Here's how I would like to use it for the example identifier "123456789":
<a trace="123456789" href="http://www.someurl.com">Click me!</a>
<span debug="123456789">Hello world</span>
<strong uid="123456789">Wow</strong>
Use a HTML5 data-* attribute.
Custom data attributes are intended to store custom data private to
the page or application, for which there are no more appropriate
attributes or elements.
More information here: http://developers.whatwg.org/elements.html#embedding-custom-non-visible-data-with-the-data-*-attributes
They won't cause any problems in older browsers: http://caniuse.com/dataset
My website is XHTML 1.1, and I had added 'rel' attributes to the <li> and <div> tags on my page, to store data for a jQuery script on the page. When validating my page, I get the error: "there is no attribute 'rel'". So, what is the best way to store arbitrary data in HTML tags?
I am working on a comments page for my website. When a comment is entered, it is POSTed via AJAX, which returns JSON of all comments. I then look at the 'rel' values to see which comments are already on the page, and only add the new ones.
The jQuery code works fine, it's just the 'rel' attributes don't validate.
While it's not XHTML spec, you could use the data-* attributes that are included in HTML5's spec.
http://html5doctor.com/html5-custom-data-attributes/
If you want to remain fully XHTML 1.1 compliant, you'll need to create a schema and include its namespace in the html element, where the schema defines the attributes you want to use, and the elements to which they apply.
Extending XHTML
Since rel isn't valid attribute for li, you should use id instead attribute instead and it is valid there too.
I think it goes against the spirit of XHTML to store "arbitrary" data in tags. You should use the jQuery.data method instead.
JQuery seems to like classes as a way to store state for different html elements.
One example would be how jQuery UI Tabs use the ui-state-active class to define which tab is currently selected.
One benefit of this method is how easy you can select elements by the different states you are looking for.
As a reminder, you can add (virtually) as many classes to an element as you want and just separate them by spaces.
<li class="client_data already_added red_text etc">Bob</li>