Hey, I'm trying to add a validation rule to multiple textboxes dynamically. Here's the js:
//validate form.
$("#SubmitForm").validate();
$("input[id*=Hours]").rules("add", {
number: true,
messages: {
number: "Please enter a valid Hours"
}
});
This applies the rule to the very first textbox on the page with "Hours" in the id but then it doesn't apply it to any of the other ones.
Anyone know what's wrong here?
Thanks, Justin
Source: Tips4all, CCNA FINAL EXAM
You can add the rule to each item matched by the wildcard selector with .each(), like this:
ReplyDelete$("#SubmitForm").validate();
$("input[id*=Hours]").each(function() {
$(this).rules("add", {
number: true,
messages: {
number: "Please enter a valid Hours"
}
});
});
Hope this helps !
I was able to get it working doing this:
ReplyDelete<%
int index = 0;
foreach (var log in Model.InvoiceLogs) {
%>
<tr>
<td class="topalign">
<%: log.LogDate.ToShortDateString() %>
<%: Html.Hidden("InvoiceLogs[" + index + "].InvoiceID", log.InvoiceID) %>
<%: Html.Hidden("InvoiceLogs[" + index + "].InvoiceLogID", log.InvoiceLogID) %>
</td>
<td class="editor-field-medium"><%: Html.TextArea("InvoiceLogs[" + index + "].Description", Convert.ToString(ViewData["Description_" + log.InvoiceLogID]))%></td>
<td class="editor-field-small topalign">
<%: Html.TextBox("InvoiceLogs[" + index + "].Hours", ViewData["Hours_" + log.InvoiceLogID])%>
<script type="text/javascript">
$(document).ready(function () {
$("#InvoiceLogs_<%: index %>__Hours").rules("add", {
number: true,
messages: {
number: "Invalid Hours"
}
});
});
</script>
</td>
</tr>
<%
index++;
}
%>
</table>
However, this doesn't seem like a good solution. What's the appropriate way to add validation rules to a list of input controls dynamically?