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"})

将jQuery验证添加到表单中动态生成的文本框

1 个答案: