I have 3 required fields on my page and 2 of them are hidden. The hidden fields values are filled by jQuery based off the selection of dropdown lists. If I just leave everything blank so that none of the fields are every filled in and hit the submit button the @Html.ValidationSummery()
only lists an error for the 1 visible field. How can I get it to show errors when the hidden fields don't have a value as well?
The code for my hidden fields:
<li>
<label for="SelectedProjects">Selected Projects:</label>
<select size="1" id="SelectedProjects" name="SelectedProjects" multiple="multiple"></select> <button class="removeButton" data-codetype="Project" type="button">-</button>
@Html.EditorFor(m => m.SelectedProjectCodes)
</li>
<li>
<label for="SelectedTasks">Selected Tasks:</label>
<select size="1" multiple="multiple" id="SelectedTasks" name="SelectedTasks"></select> <button class="removeButton" data-codetype="Task" type="button">-</button>
@Html.EditorFor(m => m.SelectedTaskCodes)
</li>
The HTML rendered:
<li>
<label for="SelectedProjects">Selected Projects:</label>
<select size="1" id="SelectedProjects" name="SelectedProjects" multiple="multiple"></select> <button class="removeButton" data-codetype="Project" type="button">-</button>
<input data-val="true" data-val-required="The SelectedProjectCodes field is required." id="SelectedProjectCodes" name="SelectedProjectCodes" type="hidden" value="" />
</li>
<li>
<label for="SelectedTasks">Selected Tasks:</label>
<select size="1" multiple="multiple" id="SelectedTasks" name="SelectedTasks"></select> <button class="removeButton" data-codetype="Task" type="button">-</button>
<input data-val="true" data-val-required="The SelectedTaskCodes field is required." id="SelectedTaskCodes" name="SelectedTaskCodes" type="hidden" value="" />
</li>
The properties in the ViewModel backing it:
[HiddenInput(DisplayValue = false), Required]
public string SelectedProjectCodes { get; set; }
[HiddenInput(DisplayValue = false), Required]
public string SelectedTaskCodes { get; set; }
By default jQuery validation (which is what MVC uses) ignores hidden fields. You can adjust this by changing the default setting when the page loads. One way might be to add an class to the hidden fields to force them to be validated.
<li>
<label for="SelectedProjects">Selected Projects:</label>
<select size="1" id="SelectedProjects" name="SelectedProjects" multiple="multiple"></select> <button class="removeButton" data-codetype="Project" type="button">-</button>
<input class="force-validation" data-val="true" data-val-required="The SelectedProjectCodes field is required." id="SelectedProjectCodes" name="SelectedProjectCodes" type="hidden" value=""/>
</li>
the the javacript to change the defaults would look like this
jQuery.validator.setDefaults({
ignore: ":hidden:not(.force-validation)"
});