Wie kann ich jQuery-Validierungsregeln von einer Seite hinzufügen, entfernen oder austauschen?

Question

Hinweis:
Diese Frage bezieht sich auf eine sehr alte Version von jQuery.validate() (Version 1.5). Dieses Plugin bietet jetzt eine integrierte Lösung dafür: das , das stattdessen verwendet werden sollte. Ich lasse diese Frage und die Antwort in ihrer ursprünglichen Form für historische Zwecke für jeden, der eine Legacy-Site pflegen muss, die nicht auf die neuesten Versionen von jQuery und jQuery.validate() upgraden kann.

---

Ich habe ein Formular, das schaltet, welche Eingabeelemente sichtbar sind. Ich möchte nur die sichtbaren Elemente auf dem Formular validieren.

Ich habe es schwer, dies richtig funktionieren zu lassen. Ich möchte Validatoren für nicht sichtbare Elemente deaktivieren und ich kann nicht den besten Weg finden, dies zu tun. Jeder Einblick, was mit meinem Code oder meiner Vorgehensweise falsch ist, würde geschätzt werden.

Wenn Sichtbarkeit umgeschaltet wird, ich habe ein paar Dinge ausprobiert:

• $("form").rules("remove") Aufruf an alle Regeln bestehenden Validierung zu löschen. Dies löst eine "undefinierte" JavaScript-Ausnahme aus.
• Aufruf $("form").validation(...options...) für die sichtbaren Elemente, in der Hoffnung, dies würde die Regeln überschreiben. Dies ermöglicht nur der ersten Gruppe, die validiert ist zu arbeiten. Das zweite Panel kann nicht validiert werden.
• Den Submit-Handler vor dem Aufruf der neuen validation()-Methode trennen. Das hat nicht getan, was ich gedacht hätte. Es entfernt alle (scheinbar) dauerhaften Überprüfungen und das Formular wird ohne Validierung übergeben.
• Löschen Sie das Validierungsobjekt mit $.removeData($('form'), 'validator'), bevor Sie versuchen, den Validator erneut aufzurufen. Dies funktioniert auch nicht.
• Dies ist in einer ASP.NET-Site, so dass die Verwendung mehrerer <form /> Tags nicht in Frage ist, da dies die Seite brechen würde.

Ich bin irgendwie ratlos, wie ich diese Arbeit machen kann. Sie können eine vollständige funktionierende Demo von dem, was ich habe, unter http://jsbin.com/ucibe3 sehen, oder bearbeiten Sie es unter http://jsbin.com/ucibe3/edit. Ich habe versucht, es auf nur den Code zu entfernen, der den Fehler verursacht.

Hier sind die wichtigsten Stücke meines Codes (Verwendung obigen Links für komplette Arbeits Seite)

HTML:

<td id="leftform"> 
    Left Form<br /> 
    Input 1: <input type="text" name="leftform_input1" /><br /> 
    Input 2: <input type="text" name="leftform_input2" /><br /> 
    <input type="submit" name="leftform_submit" value="Submit Left" /> 
</td> 
<td id="rightform" style="visibility:hidden"> 
    Right Form<br /> 
    Input 1: <input type="text" name="rightform_input1" /><br /> 
    Input 2: <input type="text" name="rightform_input2" /><br /> 
    <input type="submit" name="rightform_submit" value="Submit Right" /> 
</td> 

JavaScript:

$('#toggleSwitch').click(function() { 
    if ($('#leftform').css("visibility") !== "hidden") { 
     $('#leftform').css("visibility", "hidden"); 
     $('#rightform').css("visibility", "visible"); 
     $('form').validate({ 
      rules: { 
       rightform_input1: { required: true }, 
       rightform_input2: { required: true } 
      }, 
      messages: { 
       rightform_input1: "Field is required", 
       rightform_input2: "Field is required" 
      } 
     }); 
    } else { 
     $('#rightform').css("visibility", "hidden"); 
     $('#leftform').css("visibility", "visible"); 
     $('form').validate({ 
      rules: { 
       leftform_input1: { required: true }, 
       leftform_input2: { required: true } 
      }, 
      messages: { 
       leftform_input1: "Field is required", 
       leftform_input2: "Field is required" 
      } 
     }); 
    } 
}); 

Answer 1

Veraltet Hinweis:
Diese Antwort bezieht sich auf eine extrem alte Version der jQuery.validate() Plugin (Version 1.5) und ist jetzt veraltet wie das Plugin zur Lösung dieses Problems eine offizielle API zur Verfügung stellt. Siehe den .rules() documentation für den aktuellen Ansatz, um dies zu lösen. Ich lasse diese Antwort so, wie sie ist, um jedem zu helfen, der eine Legacy-Site pflegen muss, die nicht auf die neuesten Versionen von jQuery und jQuery.validate() upgraden kann.

---

Diese eine Funktion des Prüfers verwendet, die nicht gut in der API dokumentiert ist (und damit meine ich es überhaupt nicht dokumentiert), aber da es ein wesentlicher Bestandteil davon, wie der Validator Werke ist, Es wird wahrscheinlich nicht entfernt, auch wenn es nicht dokumentiert ist.

Sobald Sie den jQuery-Validator initialisiert haben, können Sie erneut auf das Validator-Objekt zugreifen, indem Sie die Methode für das Formularobjekt aufrufen, auf das Sie den Validator angewendet haben. Dieses Validiererobjekt verfügt über die Eigenschaft settings, in der die Standardeinstellungen zusammen mit den Einstellungen gespeichert werden, die Sie bei der Initialisierung angewendet haben.

Angenommen ich den Validator wie folgt initialisieren:

$('form').validate({ 
    rules: { 
     leftform_input1: { required: true }, 
     leftform_input2: { required: true } 
    }, 
    messages: { 
     leftform_input1: "Field is required", 
     leftform_input2: "Field is required" 
    } 
}); 

Ich kann dann die genaue Einstellungen aus dem Validator erhalten, indem Sie folgendermaßen vorgehen:

var settings = $('form').validate().settings; 

Ich kann dann mit diesen Einstellungen leicht arbeiten Objekt zum Hinzufügen oder Entfernen von Validatoren für das Formular.

Dies ist, wie Sie Validierungsregeln entfernen würden:

var settings = $('form').validate().settings; 
delete settings.rules.rightform_input1; 
delete settings.messages.rightform_input1; 

Und das ist, wie Sie Validierungsregeln hinzufügen würde:

var settings = $('form').validate().settings; 
settings.rules.leftform_input1 = {required: true}; 
settings.messages.leftform_input1 = "Field is required"; 

---

Hier ist eine Arbeitslösung für das Szenario in meinem Frage. Ich benutze jQuerys extend() Methode, um die rules und messages Eigenschaften des validate Objekts zu überschreiben, wie ich zwischen den zwei Verkleidungen umschalte.

$('#toggleSwitch').click(function() { 
    var settings = $('form').validate().settings; 
    var leftForm = $('#leftform'); 
    var rightForm = $('#rightform'); 

    if (leftForm.css("visibility") !== "hidden") { 
     leftForm.css("visibility", "hidden"); 
     rightForm.css("visibility", "visible"); 
     $.extend(settings, { 
      rules: { 
       rightform_input1: { required: true }, 
       rightform_input2: { required: true } 
      }, 
      messages: { 
       rightform_input1: "Field is required", 
       rightform_input2: "Field is required" 
      } 
     }); 
    } else { 
     rightForm.css("visibility", "hidden"); 
     leftForm.css("visibility", "visible"); 
     $.extend(settings, { 
      rules: { 
       leftform_input1: { required: true }, 
       leftform_input2: { required: true } 
      }, 
      messages: { 
       leftform_input1: "Field is required", 
       leftform_input2: "Field is required" 
      } 
     }); 
    } 
}); 

Answer 2

Zwar gibt es andere Möglichkeiten zu tun Mit ASP.net können Sie mehrere Formular-Tags verwenden, sofern sie nicht alle gerendert werden. Wenn Sie also eine Mehrfachansicht verwenden, um nur den relevanten Inhalt anzuzeigen, können Sie mehrere Formulare verwenden.

Es tendiert dazu, Validierung zu bereinigen und die Handhabung ziemlich einreichen.

---

Alternativ jquery erlaubt: Sichtbar für Ihre Wähler hinzugefügt werden, so dass Sie möglicherweise nur könnten die Wähler auf sichtbare Elemente laufen und das Problem, das Art und Weise umgehen, je nachdem wie sie versteckt sind.

Wie: sichtbar ist berechnet wurde in jQuery 1.3.2 geändert. Element wird als sichtbar angenommen, wenn es und seine Eltern Speicherplatz im Dokument verbrauchen. CSS-Sichtbarkeit wird nicht berücksichtigt. In den Versionshinweisen werden die Änderungen detaillierter beschrieben.

---

Hier ist eine bessere/einfachere Lösung aus einem anderen Beitrag auf Stapel overflow-

Anscheinend ist die Validierung Plug-in Sie angeben kann: sichtbar in Ihren Regeln. Hier ist die post-

Advanced JQuery Validation: Avoiding Validations on Certain Conditions

Answer 3

Die „erforderlich“ Erklärungen innerhalb des validate.rules Hash müssen nicht statisch als „true“ deklariert werden. Sie können stattdessen eine anonyme Funktion angeben, die nach der Sichtbarkeit von etwas sucht und abhängig von der Antwort wahr oder falsch zurückgibt.

$('form').validate({ 
rules: { 
    rightform_input1: { 
    required: function(){ 
       return $('#leftform').css("visibility") !== "hidden" 
       } }, 
    rightform_input2: { 
    required: function(){ 
       return $('#leftform').css("visibility") !== "hidden" 
       } } 
    } 
}); 

Answer 4

$('#form_id').validate();//empty rules 
//add rules/message to form element 
$('#form_id #inputId').rules("add", { 
    required  : true,        
    messages  : { 
     required : 'Add your required message' 
    } 
}); 

Answer 5

schrieb ich kleine Funktion für editting Regeln (nur erforderlich).

 $.editRules = function($array, $type) { 
      var settings = $('#signupForm').validate().settings; 
      $.each($array, function($k, $v) { 
       settings.rules[$v] = {required: ($type == 'add' ? true : false)}; 
      }); 
     }; 

Answer 6

Wenn Sie mit den neuen Einstellungen bestätigen erneut aufrufen möchten (Regeln, Nachrichten ... etc.) Anruf

$('#formid').removeData('validator') 

Diese Validierung für das Formular entfernen wird es dann mit dem neuen neu initialisieren Einstellungen