title: Adding jquery validation to dynamically generated textboxes in a form
body: <p><strong>I am using ASP.NET MVC framework for a form in which the textboxes are dynamically generated. I want to add jquery validation for all the textboxes for numeric entry. How do I do that?</strong> </p>
  
  <pre><code>&lt;table&gt;
  
      @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 &amp;&amp; Model.ExpenseDetails.Count &gt; 0)
      {
          int i = 0;
          int l_ExpHead = Model.ExpenseHeadDict.Count;
          int l_ExpDate = Model.ExpenseDateDict.Count;
  
              &lt;thead class="thead-light"&gt;
                  &lt;tr&gt;
                  &lt;th scope="col" style="width:15%"&gt;Expense Title&lt;/th&gt;
                  @for (int col = 0; col &lt; l_ExpDate; col++)
                  {
                          &lt;th colspan="2" scope="col" style="width:15%"&gt;@Model.ExpenseDateDict[col].ToString()&lt;/th&gt;
                  }
                  &lt;/tr&gt;
              &lt;/thead&gt;
  
              &lt;tbody&gt;
  
                  @for (int row = 0; row &lt; l_ExpHead; row++)
                  {
                  &lt;tr&gt;
                      &lt;th scope="row"&gt;@Model.ExpenseHeadDict[row].ToString()&lt;/th&gt;
  
                      @for (int col = 0; col &lt; l_ExpDate; col++)
                      {
                          @Html.HiddenFor(model =&gt; model.ExpenseDetails[i].ExpenseHead)
                          @Html.HiddenFor(model =&gt; model.ExpenseDetails[i].DateOfExpense)
                          string l_UploadID = "Upload_" + i;
                          string l_AmountID = "Amount_" + i;
                          string l_Span = "Span_" + i;
                          &lt;td&gt;
  
                              @Html.TextBoxFor(o =&gt; o.ExpenseDetails[i].Amount, new { @id = @l_AmountID, @class = "form-control input-group", @style = "width:140px" , @placeholder = "Amount"})
                              @Html.ValidationMessageFor(o =&gt; o.ExpenseDetails[i].Amount, "", new { @class = "text-danger" })                         
  
                          &lt;/td&gt;
                           &lt;td&gt;   
                               &lt;span class="fa fa-plus input-group" onclick="document.getElementById('@l_UploadID').click(); ShowFileCountLabel('@l_UploadID','')"&gt;&lt;/span&gt;
                          &lt;/td&gt;
                          i++;
                      }
                  &lt;/tr&gt;
  
  
                  }
  
              &lt;/tbody&gt;
  
  
          }
      }
  &lt;/table&gt;
  
  &lt;script&gt;
  $(document).ready(function () {
   $("#UploadForms").validate();
          $("input").each(function () {
              $(this).rules("add", {
                  number: true,
                  messages: {
                      number: "Please enter a valid amount."
                  }
              });
          });
  
      })
  &lt;/script&gt;
  </code></pre>
  
  <p>Expected result:
  On submit button click, I want the validation message for the textboxes to be displayed if the user enters any non-numeric entry.</p>