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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2152閲覧

Joiを使った日付のバリデーション設定を行なっている予期しないバリデーションがかかる。

keisei-001

総合スコア15

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/04/07 01:50

Joiというバリデーションツールを使って日付の『開始日』、『終了日』のところを入力をしてバリデーションにかけられた時に
「must be a number of milliseconds or valid date string」というコメントが返ってきてしまいます。
表示されるバリデーションコメント

調べてみると日付として処理をしないといけないものを文字列として処理をしていることによるものだと考えています。
調べてみると下記の記事に行き着きました。
githubのissuesにたどり着きました。
こちらをみたり公式?をみて対応してみたりしているのですがうまく解決できません。
こちらの対応で少しつまづいているのですが何か良い設定等でお心当たりないでしょうか?
よろしくお願いいたします。

**こちらイベントで発火した後のmutationsやactionのコードについては記事が長くなってしまうのでこちらには載せていません。よろしくお願いいたします。

ソースコード

html

1 <div class="field date"> 2 <div class="date-box"> 3 <div class="column"> 4 <label for="end-date">開始日</label> 5 <el-date-picker 6 id="end-date" 7 :value="jobsForm.start_date" 8 @input="updateJobsFormStartDate($event)" 9 type="date" 10 placeholder="2020-05-30" 11 size="large" 12 format="YYYY-MM-DD"> 13 </el-date-picker> 14 <span 15 v-if="validationErrors.start_date" 16 class="validation_error"> 17 {{ validationErrors.start_date }} 18 </span> 19 </div> 20 <div class="column"> 21 <label for="end-date">終了日</label> 22 <el-date-picker 23 id="end-date" 24 :value="jobsForm.end_date" 25 @input="updateJobsFormEndDate($event)" 26 type="date" 27 placeholder="2020-05-30" 28 size="large" 29 format="yyyy-MM-dd"> 30 </el-date-picker> 31 <span 32 v-if="validationErrors.end_date" 33 class="validation_error"> 34 {{ validationErrors.end_date }} 35 </span> 36 </div> 37 </div> 38 </div> 39 <span 40 v-if="validationErrors.end_date" 41 class="validation_error"> 42 {{ validationErrors.end_date }} 43 </span>

javascript

1import Joi from '~/service/validate' 2import { engineerProfileSchema } from '~/service/schema/common/engineerProfileSchema' 3import { passwordSchema } from '~/service/schema/common/passwordSchema' 4 5export const jobsSchema = Object.assign( 6 {}, 7 { 8 name: Joi.string() 9 .required() 10 .max(120) 11 .label('案件名'), 12 }, 13 { 14 programming_languages: Joi.string() 15 .required() 16 .max(500) 17 .label('開発言語'), 18 }, 19 { 20 frame_works: Joi.string() 21 .required() 22 .max(500) 23 .label('フレームワーク'), 24 }, 25 { 26 databases: Joi.string() 27 .required() 28 .max(500) 29 .label('データベース'), 30 }, 31 { 32 tools: Joi.string() 33 .required() 34 .max(500) 35 .label('使用ツール'), 36 }, 37 { 38 needed_skills: Joi.string() 39 .required() 40 .max(1000) 41 .label('必要スキル'), 42 }, 43 { 44 details: Joi.string() 45 .required() 46 .max(2500) 47 .label('開発詳細'), 48 }, 49 { 50 number_of_team: Joi.number() 51 .required() 52 .min(1) 53 .label('チーム人数'), 54 }, 55 { 56 objective: Joi.array() 57 .required() 58 .min(1) 59 .label('役職'), 60 }, 61 { 62 working_process: Joi.array() 63 .required() 64 .min(1) 65 .label('工程'), 66 }, 67 { 68 start_date: Joi.date() 69 .required() 70 .options({ 71 convert: false 72 }) 73 .label('開始日'),//おそらくここで何かしらの設定をすると思っています。 74 // .row() 75 // .format('YYYY-MM-DD') 76 // .min("now") 77 // .options({ raw: true }) 78 }, 79 { 80 end_date: Joi.date()//おそらくここで何かしらの設定をすると思っています。 81 .required() 82 .label('終了日'), 83 }, 84 { 85 recruitment_numbers: Joi.number() 86 .required() 87 .min(1) 88 .label('募集人数'), 89 }, 90)

補足情報(FW/ツールのバージョンなど)

Joi v14.3.1
node v10.15.3
Nuxt.js v2.3.4

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

@hapi/joi-dateを
インストールしてこちらの公式を見て対応したらエラーは無事に防げました!

投稿2020/04/08 01:04

編集2020/04/08 01:07
keisei-001

総合スコア15

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問