How do I provide validation for amended tags in the Visual Studio 2012 html editor?

Question

The Visual Studio 2012 html editor insists on giving me warnings for tag names not found in the detected or configured html schema.

As I use Google's AngularJs, this behaviour is not convenient as it makes good use of the fact that all major browsers will allow custom tags to be entered into the DOM.

Is there a way to provide a custom validation schema, or am I stuck with a hardcoded schemas provided by Microsoft?

---

Please note

I am aware that you can disable validation altogether by unchecking Tools->Options->Text Editor->HTML->Validation->Show Errors. However, I do not want to disable validation altogether.

Answer 1

If you are willing to edit your validation rules file, C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\Packages\schemas\html\html_5.xsd, you can eliminate validation errors related to Angularjs element directives.

First back up the original xsd file. Define your element and add it to the file. Amend related parent elements as necessary. Save and restart VS2012. Your element directive will no longer generate HTML5 validation errors.

For example, given an element directive 'schema-form-fields' that:

1. nests within a fieldset
2. requires attributes 'field', 'model' and 'schema'

The following amended fieldset and new schema-form-fields declarations eliminate unwanted validation errors.

<xsd:element name="fieldset">
    <xsd:complexType mixed="true">
        <xsd:choice>
            <xsd:element name="legend" type="legendType" minOccurs="0" maxOccurs="1" />
            <xsd:element ref="schema-form-fields" minOccurs="0" maxOccurs="1"/>
            <xsd:group ref="flowContent" />
        </xsd:choice>
        <xsd:attributeGroup ref="commonAttributeGroup" />
        <xsd:attribute name="disabled" vs:standalone="true" />
        <xsd:attribute name="form"  vs:associatedcontrolid="form" />
        <xsd:attribute name="name" />
    </xsd:complexType>
</xsd:element>

<xsd:element name="schema-form-fields">
    <xsd:complexType mixed="true">
        <xsd:attribute name="fields" type="xsd:string" use="required" />
        <xsd:attribute name="model" type="xsd:string" use="required" />
        <xsd:attribute name="schema" type="xsd:string" use="required" />
    </xsd:complexType>
</xsd:element>

Answer 2

I don't know if I understand your question correctly.

If you are saying VS2012 always show you error on ng- attribute, here is the solution.

1. add data- before ng-, so it will be data-ng-*

2. install this AngularJS intellisense support.

For VS2010 try this