我在我的应用程序中使用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 %>. <%=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
。
验证应仅适用于可见控件。
请帮帮我。
答案 0 :(得分:0)
基本上你必须在禁用方法调用之后调用ASP.NET内置的JS函数“ValidatorEnable”
Enable/disable asp.net validator controls within a specific "ValidationGroup" with jQuery?
http://geekswithblogs.net/jonasb/archive/2006/08/11/87708.aspx