Bedingte Validierung mit jquery Validierung

Mithilfe von jquery-validate-1.11.0

In meinem Formular habe ich eine Bedingung, wenn der text der Eingabe in Feld A, die Felder, die B & C werden benötigt. Wenn der text der Eingabe in Feld B, A & C werden benötigt, und so weiter und so Fort. Auch, wenn irgendein text im Feld D, klar, dass es sich.

Wenn der text der Eingabe in Feld D, und deaktivieren Sie dann die Felder A, B, C und mache Sie nicht erforderlich.

Habe ich eine Wanze, wo, Wenn ich ausfüllen Feld Eine erste, es scheint zu reichen umgehen, die anderen 2 Felder wie erforderlich. Wenn ich füllen Sie Feld b oder c zuerst, es sorgt dafür, dass Feld A erforderlich.

http://jsfiddle.net/rockitdev/mxtXX/47/

<form id="search" name="search" method="post" action="">
    <label for="a">Text A</label>
    <input id="a" type="text" class="search-person" />
    <label for="b">Text B</label>
    <input id="b" type="text" class="search-person" />
    <label for="c">Text C</label>
    <input id="c" type="text" class="search-person" />
    <label for="d">Text D</label>
    <input id="d" type="text" class="search-hcn" />
    <p>
        <input class="btn btn-primary" type="submit" value="Submit" />
    </p>
</form>

$('.search-person').focus(function () {
    $('.search-hcn').val(' ').removeClass("required");
    $('.search-person').addClass("required");
});

$('.search-hcn').focus(function () {

    $('.search-person').val(' ').removeClass("required");
    $('.search-hcn').addClass("required");
});

$('#search').validate();
  • so verwenden Sie erforderliche Prüfung für alle Felder.Dann ist es das problem löst
  • nicht alle Felder sind Pflichtfelder unbedingt...
InformationsquelleAutor Rockitdev | 2013-04-24
  1. 3

    Einstellung der name Attribute auf die input Felder löst das problem.

    JSFiddle

    <form id="search" name="search" method="post" action="">
    <label for="a">Text A</label>
    <input id="a" type="text" class="search-person" name="person1" />
    <label for="b">Text B</label>
    <input id="b" type="text" class="search-person" name="person2" />
    <label for="c">Text C</label>
    <input id="c" type="text" class="search-person" name="person3" />
    <label for="d">Text D</label>
    <input id="d" type="text" class="search-hcn" name="hcn" />
    <p>
        <input class="btn btn-primary" type="submit" value="Submit" />
    </p>
</form>

    Den debug option ist nützlich für die Suche nach solchen Fehlern.

    $('#search').validate({debug: true});
    • Erwähnenswert ist, dass das jQuery Validate plugin erfordert, dass die name Attribut immer vorhanden sein, auf die alle input-Elemente.
    InformationsquelleAutor Vimal Stan
  2. 6

    Können Sie die depends option durch Validierung plugin, dies zu tun.

    Hinweis: das Entfernen der Wert ist nicht Teil der Validierung

    $('#search').validate({
    rules: {
        a: {
            required: {
                depends: function(element) {
                    return $('#b').val().length > 0 || $('#c').val().length > 0
                }
            }
        },
        b: {
            required: {
                depends: function(element) {
                    return $('#a').val().length > 0 || $('#c').val().length > 0
                }
            }
        },
        c: {
            required: {
                depends: function(element) {
                    return $('#a').val().length > 0 || $('#b').val().length > 0
                }
            }
        },
        d: {
            required: {
                depends: function(element) {
                    return $('#a').val().length == 0 || $('#b').val().length == 0 && $('#c').val().length == 0
                }
            }
        }
    }
});

    Demo: Fiddle

    InformationsquelleAutor Arun P Johny
Schreibe einen Kommentar