Validation issue in textbox controls

Question

I'm using bootstrap in my application.

I'm creating dropdown and textbox controls dynamically based on a count and applying validation to those controls.But validation is not working for those textbox controls alone.

Here is my code:

Default.aspx.cs

public partial class DefaultClass
{
 public int ddlCount{ get; set; }
 public int txtCount{ get; set; }
 protected void Page_Load(object sender, EventArgs e)
 {
 }
}

Default.aspx

 <div class="form-horizontal">
  <%if (ddlCount > 0)
    {
     for(int i=0;i<ddlCount ;i++)
     {%>    
 <div class="control-group">
  <label class="control-label">DropDown <%=i++%>
  </label>
  <div class="controls">
  <select data-val="true" data-val-required="Field is required" name="">
  <option value="">--Select--</option> 
  <option value=1>Value1</option>
  <option value=2>Value2</option>
  </select>
  </div>
 </div>
<%
   }  
 }      
 if (txtCount> 0)
   {
    for(int i=0;i<txtCount;i++)
    {%>    
     <div class="control-group">
      <label class="control-label">Textbox<%=i++%>
      </label>
      <div class="controls">
      <input type="text" id="txtId_<%= i++%>" data-val="true" data-val-required="Field is required"/>
      </div>
     </div>
    <%}
   }%>
    </div>   
<button id="btnSubmit" class="btn btn-success" onclick="Submit();">
                    Submit</button>

 <script type="text/javascript">
$(document).ready(function () {
    ConfigureValidator();
});

function ConfigureValidator() {
    var basicDetailValidator = $('#Form1').data('validator');
    var checkatleastOneCheckboxes = $("input[type='checkbox'][data-val-checkatleastone]");
    checkatleastOneCheckboxes.each(function () {
        var nameAttr = this.name;
        basicDetailValidator.settings.rules[nameAttr].required = true;
        basicDetailValidator.settings.messages[nameAttr].required = $(this).attr("data-val-checkatleastone");
    });
    basicDetailValidator.settings.errorElement = 'span';
    basicDetailValidator.settings.errorClass = 'help-inline';
    basicDetailValidator.settings.highlight = function (e) {
        $(e).closest('.control-group').removeClass('info').addClass('error');
    }
    basicDetailValidator.settings.success = function (e) {
        $(e).closest('.control-group').removeClass('error').addClass('info');
        $(e).remove();
    }
    basicDetailValidator.settings.errorPlacement = function (error, element) {
        if (element.is(':checkbox') || element.is(':radio')) {
            var controls = element.closest('.controls');
            if (controls.find(':checkbox,:radio').length > 1) controls.append(error);
            else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
        } else if (element.is('.select2')) {
            error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
        } else {
            error.insertAfter(element);
        }
    };
}

function Submit() {
    if (!$('#Form1').valid()) {
        return false;
    }
}
</script>

I'm using js/jquery.validate.min.js , js/uncompressed/jquery.validate.js and js/uncompressed/jquery.validate.unobtrusive.js .

Validation is not working for textbox controls alone.

Please help me out.

Answer 1

try by including name attribute may it work

 <input type="text" name="text_box" id="txtId_<%= i++%>" data-val="true" data-val-required="Field is required"/>