如何在引导程序中单独验证可见控件

时间:2013-12-30 04:46:49

标签: c# javascript jquery asp.net validation

我在我的应用程序中使用bootstrap。

我正在根据计数动态创建标签,下拉列表和文本框控件,并对这些控件应用验证。但它是验证所有控件。我需要验证可见控件,它应该验证隐藏的控件。

这是我的代码:

CategoryClass.cs

public class CategoryClass
    {
     public int ddlCount{ get; set; }
     public int txtCount{ get; set; }  
     public int Id{ get; set; }
     public string Name{ get; set; }   
    }

Default.aspx.cs

public partial class DefaultClass
{
 public int CategoryCount{ get; set; }
 public List<CategoryClass> CategoryList;
 protected void Page_Load(object sender, EventArgs e)
 {
  CategoryList=new DefaultManager().GetCategoryList();
 }
}

Default.aspx的

 <div class="row-fluid">
        <div class="tabbable tabs-left">
            <div id="rsc-fuelux-wizard" class="span3" style="border: 1px solid  #C5D0DC; margin-right: 5px;">
                <table>
                    <tr>
                        <td>
                            <div class="infobox infobox-light-brown infobox-dark span12" style="background-color: #B3BCC4;">
                                <h5 class="span12 center">
                                    Category List</h5>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <ul class="nav nav-pills nav-stacked" id="CategoryTabs" style="margin-left: 5px;
                                margin-right: 5px;">
                                <%
                                    int counter = 0;
                                    foreach (CategoryClass Category in CategoryList)
                                    {
                                        counter++; 
                                %><li stepval="<%=counter %>" id="Categoryli_<%=counter %>" <%                                               
                        if (counter == 1)
                        {%> class="complete active" <%}
                        else
                        {%> class="complete" <%
                        }
                      %> cat-id="<%=Category.Id%>"><a href="javascript:void(0);" data-toggle="pill" onclick="ShowDiv(<%=Category.Id%>,<%=counter %>);">
                          <%=counter %>.&nbsp;&nbsp;<%=Category.Name%></a></li>
                                <%}
                                %>
                            </ul>
                        </td>
                    </tr>
                </table>


<div class="tab-content">
            <%counter = 0;
               foreach (CategoryClass Category in CategoryList)
                {  
  <div visibility="cat-list" id="Div_<%=Category.Id%>" style="height: 380px;"
                        class=" <%
                                 if (counter == 1)
                                 {%>tab-pane active <%
                                 }                                                       
                                 else
                                 {%>tab-pane<%
                                 }
                                  %>">
 <div class="form-horizontal">
  <%if (Category.ddlCount> 0)
    {
     for(int i=0;i<Category.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 (Category.txtCount> 0)
   {
    for(int i=0;i<Category.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>
</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;
    }
}   

function ShowDiv(objCatId, objCounter) {
            $('ul.CategoryTabs li').attr('class', 'complete');
            $('#Categoryli_' + objCounter).attr('class', 'complete active');
            $('div[visibility="cat-list"]').css('display', 'none');
            $('#Div_' + objCatId).css('display', 'block');
        }
</script>

我正在使用js/jquery.validate.min.js , js/uncompressed/jquery.validate.js and js/uncompressed/jquery.validate.unobtrusive.js

验证应仅适用于可见控件。

请帮帮我。

1 个答案:

答案 0 :(得分:0)