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

À partir de la documentation http://1000hz.github.io/bootstrap-validator/:

Ajouter les validateurs personnalisés à exécuter. Les valideurs doivent être des fonctions qui reçoivent le jQuery élément comme un argument et un retour truthy ou falsy valeur basée sur la validité de l'entrée.

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

L'ajout du programme de validation d'une entrée est effectuée comme les autres, data-foo="bar".

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

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?

OriginalL'auteur leo | 2015-04-20

12

Vous avez besoin d'appeler votre plugin manuellement, comme custom options ne fonctionneront pas avec les attributs data -:
```
$().validator({
    custom: {
        'odd': function($el) { return Boolean($el.val() % 2);}
    }
})
```
puis l'utiliser comme ceci:
```
<input placeholder="plz enter odd value" data-odd>
```
N'oubliez pas d'ajouter des messages d'erreur, voir le code

merci, cela fonctionne
Notez que les données personnalisées-* le nom doit être en bas de casse ou de votre fonction ne fonctionnera pas pour jQuery 1.4+.
Nous avons besoin de définir explicitement à l'élément de formulaire: $("#myForm").validator(...);
Les erreurs option n'est plus utilisé. La fonction de validation est censé renvoyer un message d'erreur si le champ n'est pas valide.
Cela s'exécute lors du chargement du formulaire, avant même d'en appuyant sur envoyer. Est-ce par choix ou ai-je fait une erreur?

OriginalL'auteur julesbou
6

J'ai voulu étoffer les réponses ici avec un peu plus de détail.

J'ai été de tenter de le faire en utilisant les données de l'api (mettre data-toggle="validator" dans la balise form). Retrait à partir de mon <form> de la balise et de l'activer avec le Javascript, ma fonction personnalisée travaux:
```
$('#sign-up_area').validator({
    custom: {
        'odd': function($el) { return Boolean($el.val() % 2);}
    },
    errors: {
        odd: "That's not an odd number!"
    }
});
```
J'ai également eu à ajouter une valeur aux données bizarre attribut ainsi:
```
<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>
```
Intéressant de noter que si j'ai ajouter la ligne suivante à la <input> élément, il prend la priorité sur le message d'erreur déclaré en javascript:
```
data-odd-error="Not an odd number, yo!"
```
Cependant, j'obtiens une erreur dans la console si je n'utilise que les données-odd-attribut d'erreur, mais PAS de message d'erreur spécifié dans le code Javascript. Ainsi, vous doit déclarer un message d'erreur dans le code Javascript.

OriginalL'auteur Chris Brewer

Tout d'abord ajouter 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 avez besoin de "lier" le formulaire de saisie pour le validateur personnalisé, par exemple:

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

Si vous souhaitez ajouter à cette entrée plus validateurs erreur, vous devez ajouter l'erreur personnalisé à l'entrée: les données-unique-erreur:"Ce périphérique est déjà exister"
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>">

Les données "erreur" est la valeur par défaut du validateur erreur et qu'elle appelait les "indigènes", le code suivant va montrer comment le programme de validation d'imprimer les messages d'erreur selon le responsable de la validation de la clé:

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

OriginalL'auteur omrim

Vous devez vous connecter pour publier un commentaire.