web-dev-qa-db-fra.com

Utiliser Vee-validate pour désactiver le bouton jusqu'à ce que le formulaire soit rempli correctement

Je veux désactiver mon bouton d'envoi jusqu'à ce que mon formulaire soit rempli correctement, voici ce que j'ai jusqu'à présent:

<form>
   <input type="text" class="form-control" v-validate="'required|email'" name="email" placeholder="Email" v-model="userCreate.userPrincipalName" />
   <span v-show="errors.has('email')">{{ errors.first('email') }}</span>
   <button v-if="errors.any()" disabled="disabled" class="btn btn-primary" v-on:click="sendInvite();" data-dismiss="modal" type="submit">Send Invite</button>
   <button v-else="errors.any()" class="btn btn-primary" v-on:click="sendInvite();" data-dismiss="modal" type="submit">Send Invite</button>
</form>

Ce qui précède imprime uniquement un message d'erreur et désactive le bouton d'envoi une fois que j'ai commencé à saisir une valeur. J'ai besoin qu'elle soit désactivée dès le début, avant de commencer à interagir avec l'entrée, de sorte que je ne puisse pas envoyer de chaîne vide. 

Une autre question est de savoir s'il existe un meilleur moyen que d'utiliser v-ifpour le faire.

MODIFIER:

 userCreate: {
        customerId: null,
        userPrincipalName: '',
        name: 'unknown',
        isAdmin: false,
        isGlobalAdmin: false,
        parkIds: []
    }
vue.jsvuejs2vee-validate
4
Green_qaue

Une façon de désactiver un bouton jusqu'à ce que toutes les valeurs dont vous avez besoin soit renseignée consiste à utiliser une propriété calculée qui retournera un booléen si toutes les valeurs sont attribuées ou non.

Exemple: 

Créez une propriété calculée comme ceci: 

computed: {
  isComplete () {
    return this.username && this.password && this.email;
  }
}

Et liez-le à l'attribut html disabled en tant que: 

<button :disabled='!isComplete'>Send Invite</button

Cela signifie, désactivez le bouton si !isComplete est vrai.

De plus, dans votre cas, vous n'avez pas besoin de deux boutons if/else-bound. Vous pouvez n’en utiliser qu’un seul pour le masquer/l’afficher selon que le formulaire est rempli ou contient des erreurs: 

<button :disabled="errors.any() || !isCompleted" class="btn btn-primary" v-on:click="sendInvite();" data-dismiss="modal" type="submit">Send Invite</button>

Ce bouton sera désactivé jusqu'à ce que tous les champs soient remplis et qu'aucune erreur ne soit trouvée

5
samayo

Pour vérifier si un formulaire est invalide ou non, nous pouvons ajouter une propriété computed comme celle-ci:

computed: {
    isFormInValid() {
      return Object.keys(this.fields).some(key => this.fields[key].invalid);
    },
},

Maintenant, si vous voulez commencer à vérifier immédiatement avant l’interaction de l’utilisateur avec l’un des champs, vous pouvez valider manuellement dans les hooks mounted lifecycle:

mounted() {
   this.$validator.validate();
}
2
im_tsm

ou en utilisant calculé

computed: { 
    formValidated() { 
        return Object.keys(this.fields).some(key => this.fields[key].validated) && Object.keys(this.fields).some(key => this.fields[key].valid);
        } 
}

et utilise 

button :disabled="!formValidated" class="btn btn-primary" v-on:click="sendInvite();" data-dismiss="modal" type="submit">
2
jayadevkv

Une autre méthode consiste à utiliser v-validate. initial 

<input type="text" class="form-control" v-validate.initial="'required|email'" name="email" placeholder="Email" v-model="userCreate.userPrincipalName" />

Ceci exécutera la validation de l’élément d’entrée email après le chargement de la page. Et fait que votre bouton est désactivé avant d'interagir avec l'entrée. 

1
Johan Vogelzang

Configurer le bouton pour qu'il soit :disabled:"errors.any()" désactive le bouton après la validation. Cependant, lors du premier chargement du composant, il sera toujours activé.

L'exécution de this.$validator.validate() dans la méthode mounted(), comme le suggère @im_tsm, entraîne la validation du formulaire au démarrage et l'affichage immédiat des messages d'erreur. Cette solution rendra le formulaire assez moche. En outre, la syntaxe Object.keys(this.fields).some(key => this.fields[key].invalid); est super moche.

Au lieu de cela, exécutez le validateur lorsque le bouton est cliqué, obtenez la validité de la promesse, puis utilisez-la de manière conditionnelle. Avec cette solution, le formulaire a l'air propre au démarrage, mais s'il clique sur le bouton, il affichera les erreurs et le désactivera. 

<button :disabled="errors.any()" v-on:click="sendInvite();">
    Send Invite
</button>

sendInvite() {
    this.$validator.validate().then(valid=> {
        if (valid) {
            ...
        }
    })
}

API Validator

0
brenthompson2