Vue.jsでHTMLのバリデーションが効かなくて詰まった時の話

inputタグに使用できる入力必須の機能

入力してなかったら弾かれるという基礎的なバリデーションの機能をつけようとして、よく使用するhtmlの機能のrequired="true"で処理しようとした。が、バリデーションが効かず入力してなくても次のページへ遷移してしまう。。。

HTML、CSSに関しては個人アプリやスクールで利用していたため、requiredが効かない原因がVue.jsの何らかの機能のせいなのだろうということは何となくわかったのですが、知識がなくてどこでバリデーションが無効になっているのかがわからず...

原因

submitボタンでの処理が原因でした。

//template部分
@on-click="$emit('next'); submit()"

この一行。

//js部分
  methods: {
    submit() {
      this.$emit("update", {
        eventId: this.$route.params.id,
        Name: this.Name,
        mailAddress: this.mailAddress,
      });
    }
  }

クリックした時に関数のsubmitが発火。$emit('next')で次に遷移している。
この$emit('next')で、バリデーションに引っかかってようがいまいが、データを持って次に遷移してしまっている。
なので、バリデーションをかけるのはsubmitの関数の中。

  methods: {
    submit() {
      if(this.eventId && this.eventId && this.eventId){
        this.$emit("update", {
          eventId: this.$route.params.id,
          Name: this.Name,
          mailAddress: this.mailAddress,
        });
        this.$emit('next');
      }
    }
  }

こうすることで、入力していないとボタンが押せなくなりました。