將jquery驗證添加到表單中動態生成的文本框

Question

我使用ASP.NET MVC框架作為動態生成文本框的表單。 我想為所有文本框添加jquery驗證以進行數字輸入。 我怎么做？

<table>

    @using (Html.BeginForm("Submit", "Expenses", FormMethod.Post, new { enctype = "multipart/form-data", id = "UploadForms" }))
    {
       @Html.AntiForgeryToken() 
    HtmlHelper.UnobtrusiveJavaScriptEnabled = false;
    @Html.ValidationSummary(false, "", new { @class = "text-danger" })
    if (Model.ExpenseDetails != null && Model.ExpenseDetails.Count > 0)
    {
        int i = 0;
        int l_ExpHead = Model.ExpenseHeadDict.Count;
        int l_ExpDate = Model.ExpenseDateDict.Count;

            <thead class="thead-light">
                <tr>
                <th scope="col" style="width:15%">Expense Title</th>
                @for (int col = 0; col < l_ExpDate; col++)
                {
                        <th colspan="2" scope="col" style="width:15%">@Model.ExpenseDateDict[col].ToString()</th>
                }
                </tr>
            </thead>

            <tbody>

                @for (int row = 0; row < l_ExpHead; row++)
                {
                <tr>
                    <th scope="row">@Model.ExpenseHeadDict[row].ToString()</th>

                    @for (int col = 0; col < l_ExpDate; col++)
                    {
                        @Html.HiddenFor(model => model.ExpenseDetails[i].ExpenseHead)
                        @Html.HiddenFor(model => model.ExpenseDetails[i].DateOfExpense)
                        string l_UploadID = "Upload_" + i;
                        string l_AmountID = "Amount_" + i;
                        string l_Span = "Span_" + i;
                        <td>

                            @Html.TextBoxFor(o => o.ExpenseDetails[i].Amount, new { @id = @l_AmountID, @class = "form-control input-group", @style = "width:140px" , @placeholder = "Amount"})
                            @Html.ValidationMessageFor(o => o.ExpenseDetails[i].Amount, "", new { @class = "text-danger" })                         

                        </td>
                         <td>   
                             <span class="fa fa-plus input-group" onclick="document.getElementById('@l_UploadID').click(); ShowFileCountLabel('@l_UploadID','')"></span>
                        </td>
                        i++;
                    }
                </tr>


                }

            </tbody>


        }
    }
</table>

<script>
$(document).ready(function () {
 $("#UploadForms").validate();
        $("input").each(function () {
            $(this).rules("add", {
                number: true,
                messages: {
                    number: "Please enter a valid amount."
                }
            });
        });

    })
</script>

預期結果：在提交按鈕單擊時，如果用戶輸入任何非數字條目，我希望顯示文本框的驗證消息。

Answer 1

只需設置type =“number”

 @Html.TextBoxFor(o => o.ExpenseDetails[i].Amount, new { @id = @l_AmountID, @class = "form-control input-group", @style = "width:140px" , @placeholder = "Amount",@type="number"})