web-dev-qa-db-ja.com

jqueryを使用してasp：validatorsを有効/無効にします

ユーザーがサインアップできるウィザードを使用しています。 2つのオプションを持つ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);
        }
    });
});

それで、何が悪いのか考えはありますか？

jqueryasp.netwizardrequiredfieldvalidator
13
Thomas

バリデーターのクライアント側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);
12
RemarkLima

私はより良いオプションが単純に使用することであるとわかりました：

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

上記で提案したValidatorEnabledオプションは、リンクされたコントロールの検証を自動的に呼び出し、私の場合は、不要または不要な「セラー名の値を入力してください」というエラーメッセージを表示します。

「.enabled = true」オプションを使用しても機能しません。

16
Ads

「ラジオボタンリスト1」に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>
2
waycell

これらの投稿で説明されているように、バリデーターを無効にすることができます。

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

宜しくお願いします

0
Rob Angelier