logo标签列表

使用jQuery启用/禁用asp:validators

jqueryasp.netwizardrequiredfieldvalidator
13

我正在使用一个向导程序，用户可以在其中注册。有一个带有两个选项的 asp:RadioButtonList，当单选按钮更改时，向导程序中的一些输入字段会发生变化。每个字段都有一些 asp:Validators（例如 asp:RequiredFieldValidator）。问题是，当用户提交页面时，隐藏文本框的验证器仍然会弹出。

首先，这里是更改显示的文本框和 RadioButtonList 的 div 标签

<div id="divTxt1">
  <asp:TextBox runat="server" CssClass="text" ID="txtNumber"
       type="number"/>
  <asp:RequiredFieldValidator ID="RequiredFieldValidator1" 
       runat="server" ControlToValidate="txtNumber" EnableClientScript="true" ErrorMessage="Error" ToolTip="Error">*
   </asp:RequiredFieldValidator>
</div>
<div id="divTxt2">
  <asp:TextBox runat="server" CssClass="text" ID="txtNumber2"
       type="number"/>
  <asp:RequiredFieldValidator ID="RequiredFieldValidator2" 
       runat="server" ControlToValidate="txtNumber2" EnableClientScript="true" ErrorMessage="Error2" ToolTip="Error2">*
   </asp:RequiredFieldValidator>
</div>
<div id="radio">
<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal">
   <asp:ListItem Value="1" Selected="True">Privat</asp:ListItem>
   <asp:ListItem Value="2">Offentlig</asp:ListItem>
   </asp:RadioButtonList>
</div>

我已经尝试使用 JQuery 来解决它，代码如下，我读到过这样做应该没有问题，但不幸的是，它并没有成功：

$(document).ready(function () {

    $('#<%= WizardStep1.ContentTemplateContainer.FindControl("RadioButtonList1").ClientID %> input').change(function () {
        if ($(this).val() == "1") {
            $('#txtNumber').toggle('fast');
            $('#txtNumber2').toggle('fast');     
            ValidatorEnable($('#<%=WizardStep1.ContentTemplateContainer.FindControl("RequiredFieldValidator1").ClientID %>')[0], false);
            ValidatorEnable($('#<%=WizardStep1.ContentTemplateContainer.FindControl("RequiredFieldValidator2").ClientID %>')[0], true);
        }

        if ($(this).val() == "2") {
            $('#txtNumber').toggle('fast');
            $('#txtNumber2').toggle('fast');
            ValidatorEnable($('#<%=WizardStep1.ContentTemplateContainer.FindControl("RequiredFieldValidator2").ClientID %>')[0], false);
            ValidatorEnable($('#<%=WizardStep1.ContentTemplateContainer.FindControl("RequiredFieldValidator1").ClientID %>')[0], true);
        }
    });
});

有什么想法是出了什么问题吗？

你确定吗？你能找到控件吗？已检查是否为空？ - Ravi Gadag
当我在IE中进行调试时，它会通过而没有错误 - 但它并没有禁用。 - Thomas
难道没有 JavaScript 错误吗？因为如果它不工作，一定有错误，你不这么认为吗？试着用 Firebug 进行检查。它应该会给你一个提示。 - MrClan
你能分享一下你的JavaScript“生成”版本（带有绑定的ID）吗？ - tpeczek
4个回答
19

我发现更好的选择是仅使用：

document.getElementById("<%=myValidator.ClientID %>").enabled = true;

如上所建议的ValidatorEnabled选项会自动调用链接控件的验证，在我的情况下显示了错误信息“请输入卖家名称”，这并不是必要或期望的。

使用“.enabled = true”选项则不会这样。

12

验证器的客户端API在这里。

以下内容可能适用于您的需求（这将通过客户端脚本禁用所有验证器）：

if (Page_Validators) {
    PageValidators.forEach(function(pageValidator) {
        if (pageValidator == null) {return;}
        vldGrp = pageValidator.validationGroup;
        ValidatorEnable(pageValidator, false);
    });
};

所以你可以添加一个if块来检查验证器名称，或者更确切地说是.controlToValidate，它返回验证器的目标ID，然后将其禁用：

if (Page_Validators) {
    PageValidators.forEach(function(pageValidator) {
        if (pageValidator == null) {return;}
        if (pageValidator.controltovaliddate != "<%= txtNumber2.ClientID %>") {
            return;
        }
        ValidatorEnable(pageValidator, false);
    });
};

如果它是正确的，则在循环中加入断点，如果您不需要检查任何其他验证器。 您可以使用.some而不是.forEach来提前退出:

if (Page_Validators) {
    PageValidators.some(function(pageValidator) {
        if (pageValidator == null) {return false;}
        if (pageValidator.controltovaliddate != "<%= txtNumber2.ClientID %>") {
            return false;
        }
        ValidatorEnable(pageValidator, false);
        return true;
    });
};

您可以将此内容封装到一个函数中：

var validatorState = function(element, isEnabled) {
    if (Page_Validators) {
        PageValidators.some(function(pageValidator) {
            if (pageValidator == null) {return false;}
            if (pageValidator.controltovaliddate != "<%= txtNumber2.ClientID %>") {
                return false;
            }
            ValidatorEnable(pageValidator, false);
            return true;
        });
    };
};

并使用：

validatorState('txtCancellationReson', true);
或者
validatorState($('#txtCancellationReson').attr('id'), true);
2

使用CustomValidator 控件针对“RadioButtonList1”，并将控件的可见性逻辑分离到另一个JavaScript函数中。

<div id="divTxt1">
    <asp:TextBox runat="server" CssClass="text" ID="txtNumber" type="number"/>
</div>
<div id="divTxt2">
<asp:TextBox runat="server" CssClass="text" ID="txtNumber2"
type="number"/>
</div>
<div id="radio">
    <asp:RadioButtonList ID="RadioButtonList1" runat="server"     RepeatDirection="Horizontal"      onchange:"javascript:toogleTexxBoxesVisibility(this);">
   <asp:ListItem Value="1" Selected="True">Privat</asp:ListItem>
   <asp:ListItem Value="2">Offentlig</asp:ListItem>
   </asp:RadioButtonList>
<asp:CustomValidator ID="CustomValidator1" runat="server"     ClientValidationFunction="clientSideValidationFunction" ControlToValidate="RadioButtonList1" OnServerValidate="CustomValidator1_ServerValidate" Text="Validation Error Message">asp:CustomValidator>

<script type="text/javascript">
function clientSideValidationFunction(source,arguments)
    var inputvalue = arguments.Value; //RadioButtonList1's value

   if (inputvalue == "1" && $('#txtNumber').val() == '') {
        arguments.IsValid = false;
   }
   else if (inputvalue == "2" && $('#txtNumber2').val() == '') {
        arguments.IsValid = false;
   }
   else {
        arguments.IsValid = true;
   }
};

function toogleTexxBoxesVisibility(radiobutton)
{
   if(radiobutton.val =='1')
   {
      $('#txtNumber').show('fast');
      $('#txtNumber2').hide('fast'); 
   }
  else if(radiobutton.val =='2')
  {
       $('#txtNumber').hide('fast');
       $('#txtNumber2').show('fast'); 
  }
}
</script>
</div>
0
那正是我的问题，但我决定不回复。 - Rob Angelier
3
在回答中提供链接的上下文“鼓励提供外部资源的链接，但请在链接周围添加上下文，以便您的用户了解它是什么以及为什么存在。始终引用重要链接的最相关部分，以防目标站点无法访问或永久脱机。” - JF Menard
1
第二个链接失效了。 - ADH
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接