HTML5 Element 'legend' occurs too few time

Question

I have the following View in MVC and I get the warning message: Validation (HTML5): Element 'legend' occurs too few times

@model Berwin.Models.ViewModels.UserViewModel

@{
ViewBag.Title = "Press";
}

<h2>Press Area</h2>

@using (Html.BeginForm("Register", "PressController", FormMethod.Post))
{
<fieldset>
    @Html.TextBoxFor(model => model.FullName)
</fieldset>

<fieldset>
    @Html.TextBoxFor(model => model.Company)
</fieldset>

<fieldset>
    @Html.TextBoxFor(model => model.EmailAddress)
</fieldset>

<fieldset>
    @Html.CheckBoxFor(model => model.JoinMailingList)
</fieldset>
}

Would like to know why I am getting this warning and what I need to do to fix this.

Answer 1

The way I handled it was to simply hide the legend:

<fieldset>
<legend runat=server visible="false"></legend>
...
</fieldset>

Answer 2

To prevent Visual Studio incorrectly warning you that the "Element 'legend' occurs too few times" you need to correct Visual Studio's HTML and XHTML validation files.

VS will then treat the <legend> tag as optional inside a <fieldset> tag (as per the spec).

To do so, there are two files you need to edit: html_5.xsd and xhtml_5.xsd. For VS2010 these are found in (e.g.):

C:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\Packages\schemas\html\

Steps to take:

1. Close Visual Studio

2. Using a text editor open the file html_5.xsd found in the folder above.

3. Locate the following line:

   (note there are two lines which are similar, the first is correct, the second needs editing):

   <xsd:element name="legend" type="legendType" minOccurs="1" maxOccurs="1" />

4. Edit the line to read:

   <xsd:element name="legend" type="legendType" minOccurs="0" maxOccurs="1" />

5. Save the file

6. Repeat the process for the file xhtml_5.xsd which is in the same folder

Now start Visual Studio and view your HTML5 file - the warning will be gone.

I hope that helps others, and I hope the .xsd files will be corrected in a future update.

UPDATE:

The line you need to find may be:

<xsd:element ref="legend" minOccurs="1" maxOccurs="1" vs:firstchild="true"/>

If so, change the minOccurs="1" attribute to minOccurs="0"

Answer 3

Legend is optional in a Fieldset.

But try this, to get rid of the warning:

    <fieldset>
        <legend>User</legend>
        @Html.TextBoxFor(model => model.FullName)
    </fieldset>

Answer 4

According the HTML 5 spec, the <legend> tag is not a required element within a <fieldset>.

The legend element represents a caption for the rest of the contents of the legend element's parent fieldset element, if any.

Docs: http://www.w3.org/TR/html5/forms.html#the-legend-element

In your case, its just a warning provided by Visual Studio or a plugin. Its not required and there may be a way to supress the warning under Tools - Options - Text Editor - HTML - Validation. Here you can also switch the target of your validation (HTML 5, XHTML 1, etc)

Answer 5

Q: Why are you getting this warning? A: Because the Visual Studio HTML 5 validator mistakenly believes you need a legend in every fieldset. The legend "represents a caption" for the other form elements and labels in a fieldset. It is optional.

As an aside, a fieldset is used to group form controls together. Since each of your fieldsets only contain a single form element, they aren't really "grouping" anything. Why not do away with all of them? For the short form you've shown us, I don't see a benefit to grouping a portion of these form inputs separate from the others. A fieldset makes a lot more sense when you have individual form elements that don't stand on their own and need to be grouped together. Example:

<fieldset>
    <legend>How many lumps of sugar would you like?</legend>
    <input type="radio" name="lumps" value="1" id="lumps1" />
    <label for="lumps1">One lump</label>
    <br />
    <input type="radio" name="lumps" value="2" id="lumps2" />
    <label for="lumps2">Two lumps</label>
    <br />
    <input type="radio" name="lumps" value="0" id="lumps0" />
    <label for="lumps0">No lumps for me, thanks</label>
</fieldset>

Q: What do you need to do to fix this? A: I don't think it needs fixing at all. But if you want the errant validator message to go away, add a legend element as the first child to every fieldset.

Answer 6

Where are you validating this? The legend element is optional:

http://dev.w3.org/html5/spec/Overview.html#the-fieldset-element

Content model: Optionally a legend element, followed by flow content.

The name of the group is given by the first legend element that is a child of the fieldset element, if any.

The legend element is a title for the fields within the fieldset and used as follows

<fieldset>
  <legend>My Title></legend>
  ...
</fieldset>

Which renders a box like this

-- My Title --------------
| ...                    |
--------------------------