使用 jquery 启用/禁用 asp:validators

Question

我正在使用一个向导，用户可以在其中注册。有一个带有两个选项的 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);
        }
    });
});

那么，有什么想法吗？

Answer 1

您可以禁用验证器，如这些帖子中所述：

http://www.aspdev.org/articles/asp.net-server-controls-disable-validation/

http://www.willasrari.com/blog/use-client-side-javascript-to-disable-aspnet-validators/000289.aspx

最好的问候

Answer 2

验证器的客户端 API 是 here。

您可能能够适应您的需求（这将通过客户端脚本禁用所有验证器）：

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 instead of .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);

Answer 3

对“RadioButtonList1”使用 CustomValidator 控件，并将控件可见性逻辑分离到另一个 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>

Answer 4

我发现一个更好的选择是简单地使用：

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

上面建议的 ValidatorEnabled 选项会自动调用链接控件的验证，并在我的例子中显示错误消息“请输入卖家名称的值”，这不是必需的或不需要的..

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