Die Verwendung hängt davon ab, mit dem jQuery-Validation plugin

Ich habe ein Formular mit ein paar Textfeldern, die sind standardmäßig deaktiviert, und wieder aktiviert werden durch Verwendung einer checkbox neben jedem.

Wenn aktiviert, werden die Werte in diese Textfelder sind erforderlich, um eine gültige Nummer, aber wenn es deaktiviert ist, müssen Sie nicht einen Wert (offensichtlich). Ich bin mit dem jQuery-Validation-plugin zu tun, mit dieser überprüfung, aber es scheint nicht zu tun, was ich erwarte.

Wenn ich klicken Sie auf das Kontrollkästchen, und deaktivieren Sie die textbox, ich bekomme immer noch den Fehler ungültiges Feld trotz der depends Klausel, die ich Hinzugefügt habe, um die Regeln (siehe code unten). Seltsam, was tatsächlich passiert ist, dass die Fehlermeldung zeigt für einen Bruchteil einer Sekunde geht dann Weg.

Hier ist ein Beispiel, die Liste von Checkboxen & Textfelder:

<ul id="ItemList">
<li>
    <label for="OneSelected">One</label><input id="OneSelected" name="OneSelected" type="checkbox" value="true" />
    <input name="OneSelected" type="hidden" value="false" />
    <input disabled="disabled" id="OneValue" name="OneValue" type="text" />
</li>
<li>
    <label for="TwoSelected">Two</label><input id="TwoSelected" name="TwoSelected" type="checkbox" value="true" />
    <input name="TwoSelected" type="hidden" value="false" />
    <input disabled="disabled" id="TwoValue" name="TwoValue" type="text" />
</li>
</ul>

Und hier ist der jQuery code, den ich verwende

//Wire up the click event on the checkbox
jQuery('#ItemList :checkbox').click(function(event) {
    var textBox = jQuery(this).siblings(':text');
    textBox.valid();
    if (!jQuery(this).attr("checked")) {
        textBox.attr('disabled', 'disabled');
        textBox.val('');
    } else {
        textBox.removeAttr('disabled');
        textBox[0].focus();
    }
});

//Add the rules to each textbox
jQuery('#ItemList :text').each(function(e) {
    jQuery(this).rules('add', {
        required: {
            depends: function(element) {
                return jQuery(element).siblings(':checkbox').attr('checked');
            }
        },
        number: {
            depends: function(element) {
                return jQuery(element).siblings(':checkbox').attr('checked');
            }
        }
    });
});

Ignorieren die hidden-Feld in jedes li es da ist, denn ich bin mit asp.net MVC ist Html.Checkbox Methode.

  • Ich bin kommentieren statt zu Antworten, weil ich habe noch nie verwendet die Validierung plugin. Haben Sie versucht, indem Sie das Textfeld ein.validate() innerhalb der true-Teil der if-Anweisung, die prüft, ob ein aufgegebenes Feld?
  • Leider trifft es nicht tun
InformationsquelleAutor Glenn Slaven | 2008-12-19
  1. 11

    Mithilfe der option "ignorieren" wählen (http://docs.jquery.com/Plugins/Validation/validate#toptions) sein könnte, der einfachste Weg für Sie, um sich mit diesem. Hängt davon ab, was Sie haben auf dem Formular. Für D. H. Sie würden nicht filtern auf deaktivierte Elemente, wenn Sie andere Steuerelemente, die deaktiviert wurden, aber Sie musste noch überprüfen aus irgendeinem Grund. Jedoch, wenn dieser Weg nicht funktioniert, verwenden Sie eine zusätzliche Klasse, um filter auf (hinzufügen und entfernen mit Ihrem Checkboxen) sollten erhalten Sie, wo Sie wollen zu gehen, aber einfacher.

    I. e. 

            $('form').validate({
            ignore: ":disabled",
            ...
        });
    • Schön und einfach - das es gelöst für mich. Danke!
    • hat bei mir nicht funktioniert.
    • werden Sie wollen, stellen Sie sicher, dass Ihr Selektor richtig ist. Natürlich ":deaktiviert" legt fest, dass alle Behinderten-Selektoren ignoriert werden sollte. Alternativ ignorieren: ".ignoreMe" ignoriert alle Elemente mit der Klasse "ignoreMe".
    InformationsquelleAutor Ted
  2. 4

    In der Regel, wenn Sie dies tun, ich überspringen 'hängt' und verwenden nur die required jQuery Validate-Regel und lassen Sie es handhaben die Prüfung auf der Grundlage der gegebenen Auswahl, im Gegensatz zu die Aufteilung der Logik zwischen der überprüfung von Regeln und das Kontrollkästchen click-handler. Ich habe einen quick demo, wie ich dies erreichen, mit Ihrem markup.

    Wirklich, es läuft darauf hinaus,required:'#OneSelected:checked'. Dies macht das betreffende Feld nur erforderlich, wenn der Ausdruck true ist. In der demo, wenn Sie uns die Seite auf Anhieb, es funktioniert, aber wie Sie Kontrollkästchen, die form ist nicht in der Lage zu senden, bis der markierte Felder sind gefüllt mit einigen input. Sie könnte noch ein .valid() rufen Sie in der checkbox Klick-Prozedur, wenn Sie möchten, das gesamte Formular zu validieren, klicken Sie auf.

    (Auch die, die ich gekürzt bis Sie Ihre checkbox Umschalten eines bit-Einsatz von jQuery ist wunderbar chaining Funktion, wenn Sie Ihre "Cache" zu textBox ist genauso wirksam.)

    • +1 für die elegante Lösung, ein problem mit ihm: wenn Sie deaktivieren Sie ein Kontrollkästchen, nachdem er versucht zu senden, die Fehlermeldung geht nicht Weg. gelöst wird es durch die Beseitigung der Fehlermeldung beim deaktivieren das Feld, schreiben Sie es in eine separate Antwort, weil die Formatierung in den Kommentaren ist Mist
    InformationsquelleAutor Collin Allen
  3. 2

    Hängt parameter nicht richtig funktioniert, ich nehme an, die Dokumentation ist veraltet.
    Ich schaffte es, diese funktioniert dies so:

    required : function(){ return $("#register").hasClass("open")}
    InformationsquelleAutor Jacek
  4. 1

    Folgende @Collin Allen Antwort:

    Das problem ist, dass, wenn Sie deaktivieren Sie ein Kontrollkästchen, wenn Sie die Fehlermeldung sichtbar, die Fehlermeldung geht nicht Weg.

    Ich habe es gelöst durch entfernen der Fehlermeldung beim deaktivieren das Feld.

    Nehmen Collin demo und nehmen Sie die folgenden änderungen zu aktivieren/deaktivieren-Prozess:

    jQuery('#ItemList :checkbox').click(function()
{
    var jqTxb = $(this).siblings(':text')
    if ($(this).attr('checked'))
    {       
        jqTxb.removeAttr('disabled').focus();
    }
    else
    {
        jqTxb.attr('disabled', 'disabled').val('');
        var obj = getErrorMsgObj(jqTxb, "");
        jqTxb.closest("form").validate().showErrors(obj);
    }
});
function getErrorMsgObj(jqField, msg)
{
    var obj = {};
    var nameOfField = jqField.attr("name");
    obj[nameOfField] = msg;
    return obj;
}

    Können Sie sehen, dass ich Mut entfernen Sie die Fehlermeldung aus dem Feld, wenn Sie es deaktivieren

    Und wenn Sie sich Gedanken über $("form").validate() nicht!
    Es muss nicht erneut validieren die form die es nur gibt das API-Objekt von jQuery Validierung.

    InformationsquelleAutor Avi Pinto
  5. 0

    Ich weiß nicht, ob das ist, was du wolltest... aber wäre das nicht ändern .erforderlich .wasReq (als Platzhalter zu unterscheiden, das von einer, die womöglich gar nicht erforderlich sein) auf überprüfung der box das gleiche tun? Wenn es nicht aktiviert, das Feld ist nicht erforderlich-man könnte auch removeClass(Anzahl) um den Fehler zu beseitigen gibt.

    Zu den besten meines Wissens, auch wenn ein Feld deaktiviert ist, werden Regeln angewendet, die es immer noch sind, auch, angewendet. Alternativ, können Sie immer versuchen, diese...

    //Removes all values from disabled fields upon submit
$(form).submit(function() {
   $(input[type=text][disabled=disabled]).val();
});
    InformationsquelleAutor
  6. 0

    Ich habe nicht versucht, die validator-plugin, aber die Tatsache, dass die Nachricht zeigt für ein splitsecond klingt für mich wie ein double bind, wie nennst du deine Bindemittel? Wenn Sie bind in einer Funktion versuchen, unverbindlich, kurz bevor Sie beginnen, etwa so:

    $('#ItemList :checkbox').unbind("click");
...Rest of code here...
    InformationsquelleAutor Kristoffer Sall-Storgaard
  7. 0

    Sollte nicht überprüfen, das Feld nach dem deaktivieren/aktivieren?

    jQuery('#ItemList :checkbox').click(function(event) {
        var textBox = jQuery(this).siblings(':text');

        if (!jQuery(this).attr("checked")) {
                textBox.attr('disabled', 'disabled');
                textBox.val('');
        } else {
                textBox.removeAttr('disabled');
                textBox[0].focus();
        }
        textBox.valid();    
});
    InformationsquelleAutor Daniel Moura
  8. 0

    Ich hatte genau das gleiche problem.

    Ich dies Problem gelöst, indem er den radio-button "change" - Ereignis-handler-Aufruf gültig() auf das gesamte Formular.

    Funktionierte perfekt. Die anderen oben genannten Lösungen nicht funktioniert hat für mich.

    InformationsquelleAutor drudru
Schreibe einen Kommentar