Vue.jsを使いながら問い合わせ用のフォームを作っています。
個々のinputにバリデショーンをかけ、すべてのバリデーションをパスしたらフォームの送信ボタンから送信されるようにしています。未入力の場合は入力を促すメッセージを。それぞれの正規表現に合わない場合は正しく入力させるメッセージを表示するようにしています。

フォーカスを外した時のそれぞれのバリデーションは問題なく動いているのですが、送信ボタンを押下した時にinput内に文字は入っているのに入力を促すメッセージが出てきてしまうので困っています。
よろしくお願いします。

javascript
1<body>
2  <form id="test" name="inquiry" action="#" method="post" @submit.prevent="sendMail()">
3    <input type="" name="email" @blur="validation">
4    <p>{{ errors.email }}</p>
5    <input type="" name="name" @blur="validation">
6    <p>{{ errors.name }}</p>
7    <input type="" name="namePhonetic" @blur="validation">
8    <p>{{ errors.namePhonetic }}</p>
9    <input type="" name="phoneNumber" @blur="validation">
10    <p>{{ errors.phoneNumber }}</p>
11    <input type="submit"　name="send" href="#" value="送信">
12    <p>{{ sendMessage }}</p>
13  </form>
14
15  <script type="text/javascript" src="vue.js"></script>
16  <!-- <script type="text/javascript" src="for_study.js"></script> -->
17  <script>
18
19  var app =  new Vue({
20    el:"#test",
21
22    data:{
23      sendMessage: "",
24      values: {
25        name: "",
26        namePhonetic: "",
27        phoneNumber: "" ,
28        email: "" ,
29      },
30      validations: {
31        email: {
32          pattern: /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}.[A-Za-z0-9]{1,}$/,
33          required: true,
34        },
35        name:{
36          pattern: "",
37          required: true,
38        },
39        namePhonetic: {
40          pattern: /^[ぁ-ん]+$/,
41          required: true,
42        },
43        phoneNumber: {
44          pattern: /^[0-9]*$/,
45          required: false,
46        },
47      },
48      errors: {
49        email: "",
50        name:"",
51        namePhonetic:"",
52        phoneNumber:"",
53      },
54      errorMessage: {
55        required: "必須です",
56        email: "正しい形式で入力してください",
57        name:"",
58        namePhonetic:"ひらがなで入力してください",
59        phoneNumber:"半角数字で入力してください",
60      },
61    },
62    methods:{
63      validation:function(event) {
64
65        if(!event){
66          let errorCount = 0;
67          for (var i=0; i < Object.keys(this.values).length; i++) {
68            let key = Object.keys(this.values);
69            let value = Object.values(this.values);
70            if(this.validations[key].required) {
71              if(value === "") {
72                this.errors[key] = this.errorMessage.required;
73                errorCount++;
74              }
75            }
76            else {
77              if(!value.match(this.validations[key].pattern)) {
78                this.errors[key] = this.errorMessage[key];
79                errorCount++;
80              }
81            }
82          }
83          /console.log(errorCount);
84          return errorCount;
85        } else {
86          const form = event.target;
87          if(this.validations[form.name].required) {
88            if(!event.target.value) {
89              this.errors[form.name] = this.errorMessage.required;
90            } else if (
91              !event.target.value.match(this.validations[form.name].pattern)) {
92                this.errors[form.name] = this.errorMessage[form.name];
93              }
94              else {
95                this.errors[form.name] = ""
96              }
97            }
98            else if (!event.target.value.match(this.validations[form.name].pattern)) {
99              this.errors[form.name] = this.errorMessage[form.name];
100            }
101            else {
102              this.errors[form.name] = ""
103            }
104          }
105        },
106
107
108        sendMail:function(event) {
109          console.log(this.validation());
110          return true;
111          //   if(this.validation()=== 0) {
112          //     this.sendMessage　= "送信されました"
113          //   }else {alert("入力エラーがあります");
114          //   return false;
115          // }
116        },
117      }
118    })
119    </script>

試したこと

コードを改変してどこまでしっかり動いているか確認しようとしたところif(!event){....内を未入力の際のバリデーションにしたところ今度は未入力の状態でも送信できるようになってしまいました。

追記

ご回答頂いた通りにひとまず必須の部分が対応しているか確認すべく編集してみたのですが、以下の編集でよろしいのでしょうか。

validation:function(event) {
        if(!event){
          let errorCount = 0;
          // for (var i=0; i < Object.keys(this.values).length; i++){
          Object.entries(this.values).forEach((key, value) => {
          console.log(key,value);
            //let key = Object.keys(this.values);
            //let value= Object.values(this.values);
            if(this.validations.key.required) {
              if(value === "") {
                this.errors.key = this.errorMessage.required;
                errorCount++;
              }
            }
            // else {
            //   if([!value].match(this.validations[key].pattern)) {
            //     this.errors[key] = this.errorMessage[key];
            //     errorCount++;
            //   }
            // }
          })
          console.log(errorCount);
          return errorCount;
        }

この場合ですと、以下のようなエラーになってしまいました。

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'required' of undefined"

カッコをつけたり外したりしてみたのですが、エラーが出るか出なくても想定通りに動きません。

行動規範の内容に同意します

回答1件

ベストアンサー

まず最初のfor文の中で、
valuesのkeyを取り出して回しているイメージだと思うのですが、keyにvaluesのkeyの配列がそのまま入ってしまっています。

Objectの中身を取り出して回すという目的であれば、

JavaScript
1Object.entries(this.values).forEach((key, value) => {
2  // ここに処理を書く
3})

が適していると思います。

まずこれを修正してみて、まだ想定通り動かなければお使いのブラウザのコンソールに出ているであろうエラーを追記してください。

投稿2019/04/19 09:58

FeLvi_zzz

総合スコア124

DUNK

2019/04/22 00:53

ご回答ありがとうございます。初心者なのでメソッドを使いこなせていないので勉強になりました。試してみます

DUNK

2019/04/22 04:08

追記いたしましたが、上のような方法であっていますでしょうか

DUNK

2019/04/22 08:25

度々すいません。ご回答をもとに編集したところ解決いたしました。感謝します。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Vue.jsを使ったフォーム作成

試したこと

追記

関連した質問