it-swarm.com.de

So verwenden Sie benutzerdefinierte Validatoren von github.com/1000hz/bootstrap-validator

Aus der Dokumentation http://1000hz.github.io/bootstrap-validator/ :

Fügen Sie benutzerdefinierte Validatoren hinzu, die ausgeführt werden sollen. Validatoren sollten Funktionen sein, die das jQuery-Element als Argument erhalten und basierend auf der Gültigkeit der Eingabe einen Wahrheits- oder Falschwert zurückgeben.

Objektstruktur ist: {foo: function($el) { return true || false } }

Das Hinzufügen des Validators zu einer Eingabe erfolgt genauso wie die anderen, data-foo="bar".

Sie müssen auch Standardfehlermeldungen für benutzerdefinierte Validatoren über die Fehleroption hinzufügen.

Ich verstehe nicht ganz, wie ich meinen eigenen benutzerdefinierten Prüfer definieren und ihn mit diesem Plugin verwenden kann.

Könnte mir jemand ein einfaches Beispiel oder einen Hinweis geben?

9
leo

Sie müssen Ihr Plugin manuell aufrufen, da custom-Optionen nicht mit Datenattributen funktionieren:

$().validator({
    custom: {
        'odd': function($el) { return Boolean($el.val() % 2);}
    }
})

dann benutze es so:

<input placeholder="plz enter odd value" data-odd>

Vergessen Sie nicht, Fehlermeldungen hinzuzufügen, siehe Code

12
julesbou

Ich wollte die Antworten hier etwas detaillierter ausarbeiten.

Ich habe versucht, dies zu tun, während ich das Daten-API verwendete (data-toggle="validator" in den Form-Tag). Wenn ich das aus meinem <form>-Tag entferne und mit Javascript freischalte, funktioniert meine benutzerdefinierte Funktion:

$('#sign-up_area').validator({
    custom: {
        'odd': function($el) { return Boolean($el.val() % 2);}
    },
    errors: {
        odd: "That's not an odd number!"
    }
});

Ich musste dem data-odd-Attribut auch einen Wert hinzufügen:

<div class="row">
    <div class="form-group col-xs-12 col-md-12">
        <label class="control-label" for="test">Odd/Even:</label>
        <input type="text" name="test" id="test" class="form-control" placeholder="Enter an odd integer" data-odd="odd" >
        <span class="help-block with-errors"></span>
    </div>
</div>

Es ist interessant zu beachten, dass, wenn ich dem <input>-Element Folgendes hinzufügen, Vorrang vor der in javascript deklarierten Fehlermeldung hat:

data-odd-error="Not an odd number, yo!"

Ich erhalte jedoch eine Fehlermeldung in der Konsole, wenn ich nur das Attribut data-odd-error verwende, aber in Javascript KEINE Fehlermeldung angegeben habe. Daher müssen Sie müssen eine Fehlermeldung in Javascript angeben.

6
Chris Brewer

Fügen Sie zunächst Ihren eigenen benutzerdefinierten Prüfer hinzu, zum Beispiel:

var validatorOptions = {
        delay: 100,
        custom: {
            unique: function ($el) {
                var newDevice = $el.val().trim();
                return isUniqueDevice(newDevice)
            }
        },
        errors: {
            unique: "This Device is already exist"
        }
    }

Zweitens müssen Sie die Formulareingabe für den benutzerdefinierten Prüfer "binden". Beispiel:

<input id="add_new_device_input"  class="form-control"  data-unique="unique">

Wenn Sie zu dieser Eingabe weitere Überprüfungsfehler hinzufügen möchten, müssen Sie den benutzerdefinierten Fehler zur Eingabe hinzufügen: data-unique-error = "Dieses Gerät ist bereits vorhanden" Beispiel:

<input id="add_new_device_input"  class="form-control"  data-unique="unique" data-unique-error="This device is already exist" data-error="The Device pattern is invalid" pattern="<Add some regex pattern here>">

Der "Datenfehler" ist der Standardfehler des Validators, der als "systemeigener" Schlüssel bezeichnet wird. Der folgende Code zeigt, wie der Validator die Fehlernachricht gemäß dem Validierungsschlüssel ausgibt:

   function getErrorMessage(key) {
  return $el.data(key + '-error')
    || $el.data('error')
    || key == 'native' && $el[0].validationMessage
    || options.errors[key]
}
2
omrim