Ignoriere .NET-Validatoren, wenn das Element ausgeblendet ist (display: none)

Question

Wir haben oft Probleme mit .NET-Validatoren bei Elementen, die mit JavaScript / CSS ausgeblendet sind (d.h. display:none)

Zum Beispiel (es können Syntaxfehler vorhanden sein, aber kümmern Sie sich nicht darum)

...

mit JavaScript:

$('#chkNewsletter').changed(function() {
  $(this).is(':checked') ? $('#newsletterOnly').show() : $('#newsletterOnly').hide();
});

Es sollte txtEmail nicht validieren, wenn es ausgeblendet ist.
Sie können das Formular nicht senden, wenn newsletterOnly ausgeblendet ist, da der RequiredFieldValidator immer noch wirksam ist, obwohl er ausgeblendet ist :(
Und Sie können nicht einmal die Fehlermeldung des Validierungssteuer elements sehen, weil es ausgeblendet ist

Gibt es einen Ausweg aus diesem Dilemma?

Ich versuche, PostBacks zu vermeiden, um die Benutzererfahrung zu verbessern.
Ich wünschte, ich könnte das .NET-Javascript so ändern, dass Steuerelemente nur validiert werden, wenn sie sichtbar sind.

Answer 1

Ich habe dies als allgemeine Lösung geschrieben (kann auf allen .NET-Websites verwendet werden).

Sie müssen nur ein OnClientClick zum Absenden-Button hinzufügen.

//===================================================================
// Deaktivieren von .NET-Validatoren für ausgeblendete Elemente. Gibt zurück, ob die Seite jetzt gültig ist.
// Verwendung:
//   
//===================================================================
function DisableHiddenValidators() {
  for (var i = 0; i < Page_Validators.length; i++) {
    var visible = $('#' + Page_Validators[i].controltovalidate).is(':visible');
    ValidatorEnable(Page_Validators[i], visible)
  }
  return Page_ClientValidate();
}

Um es zu verwenden, fügen Sie einfach den obigen JavaScript-Code hinzu und fügen Sie der Absenden-Schaltfläche die Klasse OnClientClick="DisableHiddenValidators()" hinzu:

BEARBEITEN: jQuery $(absendenButton).click Funktion hat auf iPhone/Android nicht funktioniert. Ich habe den obigen Beispielcode leicht geändert.

Wenn jemand etwas Falsches bemerkt oder mögliche Verbesserungen vorschlagen möchte, bitte kommentieren :)

Answer 2

Es kann auch eine gute Idee sein, Validierungsgruppen in einer Situation wie dieser zu verwenden. Wenn Sie Ihre Validatoren gruppieren können, geben Sie auf der Schaltfläche an, gegen welche Validierungsgruppe Sie validieren müssen. Nur die Validatoren in der Gruppe werden validiert. Lesen Sie mehr hier: http://msdn.microsoft.com/en-us/library/vstudio/ms227424(v=vs.100).aspx

Answer 3

Magic: Vielen Dank!

Leicht modifiziert, um die ValidationGroup einzuschließen, in der es sich befindet.

function DisableHiddenValidators(validationGroup) {
    for (var i = 0; i < Page_Validators.length; i++) {
        var isVisible = $('#' + Page_Validators[i].controltovalidate).is(':visible');  
        var isValGrp = (Page_Validators[i].validationGroup === validationGroup);
        ValidatorEnable(Page_Validators[i], (isValGrp && isVisible));  //Aktivieren nur wenn in der Validierungsgruppe und Sichtbar = true
    }
    return Page_ClientValidate(validationGroup);
}

Fügen Sie die benutzerdefinierte DisableValidators-Methode zum Klick-Ereignisbaum hinzu:

$('#myButtonControlId').on("click", function(e) { DisableHiddenValidators('Send'); });