web-dev-qa-db-fra.com

Comment utiliser les validateurs personnalisés de github.com/1000hz/bootstrap-validator

De la documentation http://1000hz.github.io/bootstrap-validator/ :

Ajoutez des validateurs personnalisés à exécuter. Les validateurs doivent être des fonctions qui reçoivent l'élément jQuery en tant qu'argument et renvoient une valeur de vérité ou de fausseté en fonction de la validité de l'entrée.

La structure d'objet est: {foo: function($el) { return true || false } }

L'ajout du validateur à une entrée se fait exactement comme les autres, data-foo="bar".

Vous devez également ajouter des messages d'erreur par défaut pour tous les validateurs personnalisés via l'option errors.

Je ne comprends pas très bien comment définir mon propre validateur personnalisé et comment l'utiliser avec ce plugin.

Quelqu'un pourrait-il me donner un exemple simple ou un indice?

javascriptpluginscustom-validators
9
leo

Vous devez appeler votre plugin manuellement, car les options custom ne fonctionneront pas avec les attributs de données:

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

puis utilisez-le comme ceci:

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

N'oubliez pas d'ajouter des messages d'erreur, voir le code

12
julesbou

Je voulais préciser les réponses ici avec un peu plus de détails.

J'essayais de faire cela en utilisant data-api (en mettant data-toggle="validator" dans la balise form). En supprimant cela de ma balise <form> et en l'activant avec Javascript, ma fonction personnalisée fonctionne:

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

J'ai également dû ajouter une valeur à l'attribut data-odd:

<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>

Il est intéressant de noter que si j'ajoute l'élément suivant à l'élément <input>, il prévaut sur le message d'erreur déclaré en javascript:

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

Cependant, je reçois une erreur dans la console si je n'utilise que l'attribut data-odd-error mais AUCUN message d'erreur spécifié en Javascript. Ainsi, vous devez déclarer un message d'erreur en Javascript.

6
Chris Brewer

Tout d’abord, ajoutez votre propre validateur personnalisé, par exemple:

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

Deuxièmement, vous devez "lier" l'entrée de formulaire pour le validateur personnalisé, par exemple:

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

Si vous voulez ajouter à cette entrée plus d'erreur de validateurs, vous devez ajouter l'erreur personnalisée à l'entrée: data-unique-error = "Ce périphérique existe déjà" Par exemple:

<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>">

"Data-error" est l'erreur de validation par défaut. Elle s'appelle clé "native". Le code suivant montre comment le validateur affiche les messages d'erreur en fonction de la clé de validation:

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