Włączanie/wyłączanie asp: walidatory używające jquery

Question

Pracuję z kreatorem, w którym użytkownik może się zarejestrować. Istnieje asp: RadioButtonList z dwiema opcjami, a niektóre pola wejściowe w kreatorze zmieniają się, gdy zmienia się radiobutton. Na każdym polu znajduje się kilka asp: Validators (np. RequiredFieldValidator). Problem polega na tym, że kiedy użytkownik przesyła stronę, walidator ukrytego pola tekstowego wciąż pojawia się.

pierwsze, tutaj jest znaczniki div, który zmienia pokazane tekstowych i RadioButtonList

<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> 

Próbowałem go rozwiązać przy użyciu JQuery jak poniżej, co mam czytać powinno załatwić sprawę, ale niestety nie:

$(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); 
     } 
    }); 
}); 

Jakieś pomysły, co jest nie tak?

Answer 1

Klient strona API dla weryfikatorów jest here.

Coś może być w stanie dostosować się do Twoich potrzeb (spowoduje to wyłączenie wszystkich weryfikatorów za pośrednictwem skryptu klient):

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

Więc można dodać if blok aby sprawdzić nazwę walidatora lub więcej tak .controlToValidate która zwraca identyfikator docelowy walidator - następnie wyłączyć go:

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

---

należy również prawdopodobnie dodać przerwę w pętli czy to ri jeden, jeśli nie musisz sprawdzać żadnych kolejnych walidatorów. Można użyć .some instead of .forEach złamać wcześnie:

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

---

można ująć to w funkcję:

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; 
     }); 
    }; 
}; 

i zastosowanie:

validatorState('txtCancellationReson', true); 

lub

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

Answer 2

Można wyłączyć walidator jak opisano w tych stanowisk:

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

pozdrawiam

Answer 3

użyj kontrolki CustomValidator dla "RadioButtonList1" i oddziel osobną kontrolę logiki visibilty do innej funkcji 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

znalazłem lepszym rozwiązaniem było użycie po prostu:

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

Opcja ValidatorEnabled jak zasugerowano powyżej automatycznie wywołuje walidację połączonego kontrolą iw moim przypadku pokazuje się komunikat o błędzie „Podaj wartość dla nazwy sprzedawcy ", która nie była konieczna lub pożądana.

Korzystanie z opcji" .enabled = true "nie jest możliwe.