Abilita/disabilita asp: validatori utilizzando jquery

Question

Sto lavorando con una procedura guidata, in cui l'utente può registrarsi. C'è un asp: RadioButtonList con due opzioni, e alcuni dei campi di input nella procedura guidata cambia quando cambia il pulsante radio. Su ogni campo c'è un asp: Validator (asp: RequiredFieldValidator ad esempio). Il problema è che quando l'utente invia la pagina, il validatore per la casella di testo nascosta sta ancora spuntando.

primo luogo, qui è il tag div che cambia le caselle di testo indicati e il 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> 

ho cercato di risolverlo utilizzando jQuery come il seguente, che ho letto dovrebbe fare il trucco, ma purtroppo non:

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

Quindi, qualsiasi idea cosa c'è che non va?

Answer 1

L'API lato client per validatori è here.

Qualcosa si può essere in grado di adattarsi alle vostre esigenze (questo disabiliterà tutti i validatori tramite script client):

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

Così si potrebbe aggiungere un blocco if per controllare il nome validatore, o più in modo che il .controlToValidate che restituisce l'ID di destinazione del validatore - allora disabilitarlo:

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

---

si dovrebbe anche probabilmente aggiungere una pausa nel ciclo se si tratta di ri Uno, se non è necessario controllare ulteriori validatori. È possibile utilizzare .some instead of .forEach per rompere presto:

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

---

È possibile incapsulare questo in una funzione:

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

ed impiego:

validatorState('txtCancellationReson', true); 

o

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

Answer 2

È possibile disattivare il validatore, come descritto in questi post:

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

migliori saluti

Answer 3

usa il controllo CustomValidator per "RadioButtonList1" e controlla la logica di visibilità dei controlli su un'altra funzione 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

ho trovato una soluzione migliore era di usare semplicemente:

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

L'opzione ValidatorEnabled come suggerito sopra automaticamente chiama la convalida del controllo collegato e nel mio caso mostra il messaggio di errore "Inserire un valore per nome venditore "che non era necessario o desiderato.

L'utilizzo dell'opzione" .enabled = true "no.