I am still quite new to jQuery and I am trying to setup the jQuery.Validate plugin so that it displays all of the error messages below the submit button instead of all over in the document. I have a table of options with a check box on each row. The no check box selected error message shows on the first row of the table which will cause confusion for the users.
Is there a way to define a "static path" to a tag so that it can always be found? Or what am I doing wrong?
Here is what I am trying to do:
$("#form1").validate({
rules: {
"CbSelect[]": {
required: true,
minlength: 1
}
},
messages: {
"CbSelect[]": {
required: "Please select at least one employee.",
minlength: "Please select at least one employee."
}
},
errorContainer: "#errorList",
errorLabelContainer: "#errorList ul",
wrapper: "li",
debug: true
});
Here is my code with only the relevant parts:
<% using (Html.BeginForm("Display", "Supervisor", FormMethod.Post, new { Id = "form1" }))
{ %>
<%= Html.DropDownList("DropDownAction", new SelectList(Model.Actions, "Value", "Text"), "(Select)", new { Class = "required" })%>
<input type="submit" value="Submit" />
<div class="errorList">
<ul>
</ul>
</div>
<fieldset>
<table id="employees">
<tr id="rowHeader">
<th style="text-align: center;">
<input type="checkbox" class="checkall" />
</th>
...
</tr>
<% foreach (var item in Model.Timesheets)
{ %>
<tr id="<%= Html.Encode(item.Id) %>">
<td style="text-align: center;">
<input type="checkbox" name="CbSelect[]" class="selected" value="<%= Html.Encode(item.Id) %>" />
</td>
...
</tr>
<% } %>
</table>
</fieldset>
<% } %>