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

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

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

5522閲覧

jQuery Parsleyによる独自のバリデーション

envogue

総合スコア12

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1グッド

1クリップ

投稿2016/07/07 11:05

編集2016/07/07 13:12

jQuery 1.12.4、 Parsley 2.4.3使用

jQueryプラグイン Parsleyを使い、バリデーションを実装しています。
http://parsleyjs.org/doc/

必須入力である、名前や件名が空の時にhas-errorというクラスが付加され、
入力済ならば、has-successというクラスが付加されるようにしています。

日時の欄は日、時、分の3つが入力されていなければ、エラーメッセージを
1つだけ表示するよう、独自のバリデーションを追加しようとしているのですが、
これが思うようにできていません。

html

1<form class="parsley-validate" data-parslery-validate="" parsley-use-html5-constraints="false"> 2<label>お名前</label> 3<input tyep="text" name="yourname" required=""> 4 5<label>メールアドレス</label> 6<input tyep="email" name="email" required=""> 7 8<label>件名</label> 9<input tyep="text" name="subject" required=""> 10 11<label>ご希望の日時</label> 12<input type="date" name="request_date" required="required"> 13 14<select name="hour"> 15<option value=""></option> 16<option value="00">00</option> 17<option value="01">01</option> 1819</select> 20 21<select name="minute"> 22<option value=""></option> 23<option value="00">00</option> 24<option value="01">01</option> 2526</select> 27 28<textarea name="body" required=""></textarea> 29 30<input type="submit" value="送信"> 31</form> 32 33<script> 34$(function(){ 35 $('form.parsley-validate').parsley({ 36 trigger: 'change', 37 successClass: "has-success", 38 errorClass: "has-error", 39 classHandler: function (el) { 40 return el.$element.closest('.form-group'); //working 41 }, 42 errorsWrapper: '<div class="invalid-message"></div>', 43 errorTemplate: '<span></span>' 44 }); 45}); 46</script>

この後、どのように書けばいいでしょうか。

追記します。
ここの回答を参考にしつつ、addValidatorを書いたのですが
動かずに困っています。(特にエラーもなし)
http://stackoverflow.com/questions/27383263/validate-multiple-fields-with-parsley

addValidatorを呼び出しているかどうかチェックするため
console.logを書いたのですが、何も出ていません。
ひたすらドキュメントを読んでいるのですが、解決できずにおります。

html

1<!-- 参考URLを元に変更 --> 2<input type="date" name="request_date" required="required" data-parsley-date="js-dob" class="js-dob-date"> 3<input type="text" name="hour" required="required" data-parsley-date="js-dob" class="js-dob-hour"> 4<input type="text" name="minute" required="required" data-parsley-date="js-dob" class="js-dob-minute"> 5 6<script> 7$(function(){ 8 <!-- 以下を追記 --> 9 window.Parsley.addValidator('date', 10 function(value, requirements){ 11 //addValidatorを呼び出してるかチェックするため 12 console.log('addValidator'); 13 var day = $('.'+requirements+'-date').val(), 14 hour = $('.'+requirements+'-hour').val(), 15 day = $('.'+requirements+'-minute').val(); 16 //以下略 17 } 18 ); 19 <!-- /追記終わり --> 20 21 $('form.parsley-validate').parsley({ 22 trigger: 'change', 23 successClass: "has-success", 24 errorClass: "has-error", 25 classHandler: function (el) { 26 return el.$element.closest('.form-group'); //working 27 }, 28 errorsWrapper: '<div class="invalid-message"></div>', 29 errorTemplate: '<span></span>' 30 }); 31}); 32</script> 33
mondaminZ👍を押しています

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

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

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

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

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

guest

回答2

0

html

1<label>ご希望の日時</label> 2<input type="datetime-local" name="request_date" required="required">

datetime-localを使うとか?

投稿2016/07/07 14:17

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

envogue

2016/07/08 03:10 編集

コメントありがとうございます。 いい案なのですが、いつからだけ入力していつまでが未入力の場合にバリデートしたいので、今回は使え無さそうです。
guest

0

ベストアンサー

【javascript - Validate multiple fields with Parsley? - Stack Overflow】
http://stackoverflow.com/questions/27383263/validate-multiple-fields-with-parsley

ここの質問と回答が流用できるのでは。

投稿2016/07/07 11:42

kei344

総合スコア69364

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

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

envogue

2016/07/07 13:14

コメントありがとうございます。 StackOverflowの回答は見たことがありまして、追記部分のように書いてみたのですが、動かない状況でした。 辛抱強くドキュメントを読んでみようと思います。
kei344

2016/07/07 16:33

input要素に data-parsley-trigger="change" を付けたら多分動くと思います。 他のコードが混じっている上moment.jsが入っていないので正しく動きませんが、addValidatorが動いたことを下記URLで確認しました。 http://jsfiddle.net/6fr1ccbf/5/
envogue

2016/07/08 03:30

ありがとうございます。 参考にさせていただきます。 入力しないユーザーだとchangeイベントが発生しないので、 submitイベントでaddValidatorが動くよう試行錯誤してみます。
kei344

2016/07/08 04:48

window.Parsley.on( 'field:validated', function() { // Triggered after a field is validated (with success or with errors). } ); でチェックすればいけるのでは?
envogue

2016/07/08 06:53

ありがとうございます。 おかげさまで教えていただいた方法で関数を呼び出すことができました。 これで実装できます。 本当に助かりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問