web-dev-qa-db-ja.com

Vee-validateを使用して、フォームに正しく記入されるまでボタンを無効にする

フォームが正しく記入されるまで送信ボタンを無効にしたいと思っています。

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

上記はエラーメッセージを出力し、値の入力を開始した後に送信ボタンを無効にします。空の文字列を送信できないように、入力との対話を開始する前に、最初から無効にする必要があります。

別の質問は、v-ifを使用してこれを行うよりも良い方法があるかどうかです。

編集：

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

必要なすべての値が入力されるまでボタンを無効にする1つの方法は、すべての値が割り当てられているかどうかに応じてブール値を返す計算プロパティを使用することです

例：

次のような計算プロパティを作成します。

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

そして、それをhtml disabled属性にバインドします：

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

つまり、!isCompleteはtrue

また、あなたの場合、2つのif/else-boundボタンは必要ありません。フォームが完成したかどうかに基づいて、1つだけを使用して非表示/表示できますまたはにエラーがあります：

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

このボタンは、すべてのフィールドが入力され、エラーが検出されなくなるまで無効になります

11
samayo

ボタンを:disabled:"errors.any()"に設定すると、ボタンafter検証が無効になります。ただし、コンポーネントが最初にロードされるときは、引き続き有効になります。

@im_tsmが示唆するように、this.$validator.validate()メソッドでmounted()を実行すると、フォームが起動時に検証され、すぐにエラーメッセージが表示されます。この解決策により、フォームは非常にいものになります。また、Object.keys(this.fields).some(key => this.fields[key].invalid);構文は非常に見苦しいです。

代わりに、ボタンがクリックされたときにバリデーターを実行し、promiseで有効性を取得してから、条件で使用します。このソリューションでは、起動時にフォームはきれいに見えますが、ボタンをクリックするとエラーが表示され、ボタンが無効になります。

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

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

バリデータAPI

8
brenthompson2

別の方法は、v-validateを利用することです。初期

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

これにより、ページがロードされた後に電子メール入力要素の検証が実行されます。また、入力を操作する前にボタンを無効にします。

2
Johan Vogelzang

フォームが無効かどうかを確認するには、次のようなcomputedプロパティを追加します。

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

ユーザーがフィールドと対話する直前にチェックを開始したい場合は、mountedライフサイクルフック内で手動で検証できます。

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

または計算を使用して

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

そして使用

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