【Vue】ページ初回表示時にフォームのバリデーションエラーを発火させない

Sun, 27 Nov 2022 14:33:25 +0900

何かしてからエラーを表示させたい

ページに設置したお問い合わせフォームの入力内容をチェックするバリデーションをVue.jsで作ってみたのですが、入力していないのにエラーを表示する仕様になってしまいました。ページを表示していきなり赤文字のエラーが表示されていると、正直気分が悪いです。

初回表示時は発火させない方法

バリデーションはcomputed（算出プロパティ）で実行するようにしています。methodsにカウンターを作り、フォームのinputタグにv-on.click="countUp"またはv-on.change="countUp"を加えて、フォームに入力があるとカウンターが0以上になり、computedの命令が実行されるうにIF文を入れることで解決できました。

例

HTML部分

@changeはv-on.changeと同じ意味です。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <input type="text" v-model="message" @change="countUp"/>  
  <div>カウント:{{count}}</div>  
  <div>エラー:{{nameCheck}}</div>  
</div>

JS部分

var app = new Vue({
  el: "#app",
  data:{
    count: 0,
  },
  methods: {
    countUp: function() {
      this.count += 1
    },
  },
  computed: {
    nameCheck() {
      if(this.count > 0) {
        if(!this.message){  
          return "入力がありません";
        }
      } 
    }
  },
})

デモ

入力欄の値を変更してフォーカスを外すとカウントの数が増えます。入力欄に何か文字があるとエラーが表示されませんが、入力欄を空にするとエラーが表示されます。

カウント:{{count}} エラー:{{nameCheck}}

var app = new Vue({ el: “#app”, data:{ count: 0, }, methods: { countUp: function() { this.count += 1 }, }, computed: { nameCheck() { if(this.count > 0) { if(!this.message){
return “入力がありません”; } } } }, })

参考にさせていただいたページ

https://ishidalog.com/?p=343 https://ishidalog.com/?p=343

【Vue】お問い合わせフォームのバリデーションとPHPでメール送信サンプル

Tue, 11 Oct 2022 10:37:18 +0900

お問い合わせフォームの内容をPHPからmb_send_mailで飛ばす前に、お問い合わせフォームの入力内容をvue.jsでチェック（バリデーション）を行う方法について参考になったページをメモ。

コピペでチェックから送信までできました。ソースの解説も詳しくてありがたい内容でした。バリデーションでエラーがあっても送信できてしまう点が気になりますが、これを参考にあとは自力で欲しい機能を追加してみたいと思います。

https://base91.net/vue-mission-9/ https://base91.net/vue-mission-9/

Vue on qwerty.work