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

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

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

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

8939閲覧

jQuery-Validation-Engineでメッセージ変更

takeke

総合スコア60

JavaScript

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/09/27 11:29

編集2018/09/30 16:01

エラーメッセージの表示方法でよくわからないことがでてきたので質問させていただきます。

jQuery-Validation-Engineというのを導入したのですが、エラーメッセージの方法を分けたいのですが、どう直すのかわかりません。

導入はこちら参考にしました⇓
http://www.webdesign-fan.com/jquery-validation-engine

htmlのフォーム画面で使っているのですが、該当のhtmlとjsファイルはこちらです

html

1<input class="validate[required]" type="text" placeholder="名前入力してください" size="50" maxlength="50" name="name_form" id="textForm"> 2

js

1;/***************************************************************** 2 * Japanese language file for jquery.validationEngine.js (ver2.0) 3 * 4 * Transrator: tomotomo ( Tomoyuki SUGITA ) 5 * http://tomotomoSnippet.blogspot.com/ 6 * Licenced under the MIT Licence 7 *******************************************************************/ 8(function($){ 9 $.fn.validationEngineLanguage = function(){ 10 }; 11 $.validationEngineLanguage = { 12 newLang: function(){ 13 $.validationEngineLanguage.allRules = { 14 "required": { // Add your regex rules here, you can take telephone as an example 15 "regex": "none", 16 "alertText": "* 必須項目です", 17 "alertTextCheckboxMultiple": "* 選択してください", 18 "alertTextCheckboxe": "* チェックボックスをチェックしてください" 19 }, 20 "requiredInFunction": { 21 "func": function(field, rules, i, options){ 22 return (field.val() == "test") ? true : false; 23 }, 24 "alertText": "* Field must equal test" 25 }, 26 "minSize": { 27 "regex": "none", 28 "alertText": "* ", 29 "alertText2": "文字以上にしてください" 30 }, 31 "groupRequired": { 32 "regex": "none", 33 "alertText": "* You must fill one of the following fields" 34 }, 35 "maxSize": { 36 "regex": "none", 37 "alertText": "* ", 38 "alertText2": "文字以下にしてください" 39 }, 40 "min": { 41 "regex": "none", 42 "alertText": "* ", 43 "alertText2": " 以上の数値にしてください" 44 }, 45 "max": { 46 "regex": "none", 47 "alertText": "* ", 48 "alertText2": " 以下の数値にしてください" 49 }, 50 "past": { 51 "regex": "none", 52 "alertText": "* ", 53 "alertText2": " より過去の日付にしてください" 54 }, 55 "future": { 56 "regex": "none", 57 "alertText": "* ", 58 "alertText2": " より最近の日付にしてください" 59 }, 60 "maxCheckbox": { 61 "regex": "none", 62 "alertText": "* チェックしすぎです" 63 }, 64 "minCheckbox": { 65 "regex": "none", 66 "alertText": "* ", 67 "alertText2": "つ以上チェックしてください" 68 }, 69 "equals": { 70 "regex": "none", 71 "alertText": "* 入力された値が一致しません" 72 }, 73 "creditCard": { 74 "regex": "none", 75 "alertText": "* 無効なクレジットカード番号" 76 }, 77 "phone": { 78 // credit: jquery.h5validate.js / orefalo 79 "regex": /^([+][0-9]{1,3}([ .\-])?)?([(][0-9]{1,6}[)])?([0-9 .\-]{1,32})(([A-Za-z \:]{1,11})?[0-9]{1,4}?)$/, 80 "alertText": "* 電話番号が正しくありません" 81 }, 82 "email": { 83 // Shamelessly lifted from Scott Gonzalez via the Bassistance Validation plugin http://projects.scottsplayground.com/email_address_validation/ 84 "regex": /^((([a-z]|\d|[!#$%&'*+\-/=?^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(.([a-z]|\d|[!#$%&'*+\-/=?^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))).)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))).?$/i, 85 "alertText": "* メールアドレスが正しくありません" 86 }, 87 "integer": { 88 "regex": /^[\-+]?\d+$/, 89 "alertText": "* 整数を半角で入力してください" 90 }, 91 "number": { 92 // Number, including positive, negative, and floating decimal. credit: orefalo 93 "regex": /^[\-+]?((([0-9]{1,3})([,][0-9]{3})*)|([0-9]+))?([.]([0-9]+))?$/, 94 "alertText": "* 数値を半角で入力してください" 95 }, 96 "date": { 97 "regex": /^\d{4}[/\-](0?[1-9]|1[012])[/\-](0?[1-9]|[12][0-9]|3[01])$/, 98 "alertText": "* 日付は半角で YYYY-MM-DD の形式で入力してください" 99 }, 100 "ipv4": { 101 "regex": /^((([01]?[0-9]{1,2})|(2[0-4][0-9])|(25[0-5]))[.]){3}(([0-1]?[0-9]{1,2})|(2[0-4][0-9])|(25[0-5]))$/, 102 "alertText": "* IPアドレスが正しくありません" 103 }, 104 "url": { 105 "regex": /^(https?|ftp)://(((([a-z]|\d|-|.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!$&'()*+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]).(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]).(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]).(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))).)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))).?)(:\d*)?)(/((([a-z]|\d|-|.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!$&'()*+,;=]|:|@)+(/(([a-z]|\d|-|.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!$&'()*+,;=]|:|@)*)*)?)?(?((([a-z]|\d|-|.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!$&'()*+,;=]|:|@)|[\uE000-\uF8FF]|/|?)*)?(\#((([a-z]|\d|-|.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!$&'()*+,;=]|:|@)|/|?)*)?$/i, 106 "alertText": "* URLが正しくありません" 107 }, 108 "onlyNumberSp": { 109 "regex": /^[0-9\ ]+$/, 110 "alertText": "* 半角数字で入力してください" 111 }, 112 "onlyLetterSp": { 113 "regex": /^[a-zA-Z\ \']+$/, 114 "alertText": "* 半角アルファベットで入力してください" 115 }, 116 "onlyLetterNumber": { 117 "regex": /^[0-9a-zA-Z]+$/, 118 "alertText": "* 半角英数で入力してください" 119 }, 120 // --- CUSTOM RULES -- Those are specific to the demos, they can be removed or changed to your likings 121 "ajaxUserCall": { 122 "url": "ajaxValidateFieldUser", 123 // you may want to pass extra data on the ajax call 124 "extraData": "name=eric", 125 "alertText": "* This user is already taken", 126 "alertTextLoad": "* Validating, please wait" 127 }, 128 "ajaxNameCall": { 129 // remote json service location 130 "url": "ajaxValidateFieldName", 131 // error 132 "alertText": "* This name is already taken", 133 // if you provide an "alertTextOk", it will show as a green prompt when the field validates 134 "alertTextOk": "* This name is available", 135 // speaks by itself 136 "alertTextLoad": "* Validating, please wait" 137 }, 138 "validate2fields": { 139 "alertText": "* 『HELLO』と入力してください" 140 } 141 }; 142 143 } 144 }; 145 $.validationEngineLanguage.newLang(); 146})(jQuery); 147

まだあまり記述が読めないのですが、htmlの方で、class="validate[required]"と書いたので、jsの方の"required"が呼び出されて、htmlの方がtype="text"だからjsの方の"alertText": "* 必須項目です",が反応しているんだと思うんですが、仮に、もう一つ別のinputタグでclass="validate[required]"のtype="text"が出てきた場合、同じメッセージがでてきますよね?

こちらそれぞれ別のメッセージ表示するにはどうしたらよいでしょうか?

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

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

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

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

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

m.ts10806

2018/09/27 11:57

回答した後に気づいたのですが、本件と関係なさそうなタグがあるのでご調整いただければと。混乱のもととなります。
takeke

2018/09/30 16:00

了解しましたm(_ _)m
guest

回答2

0

ベストアンサー

ドキュメントの使い方にあるように、data-errormessage-*属性を使って指定してもいいし、
http://posabsolute.github.io/jQuery-Validation-Engine/#field-validations

HTML

1<input data-errormessage-value-missing="textFormは必須です" class="validate[required]" type="text" placeholder="名前入力してください" size="50" maxlength="50" name="name_form" id="textForm" />

オプションのcustom_error_messagesで指定してもいいでしょう。
http://posabsolute.github.io/jQuery-Validation-Engine/#custom_error_messages

jQuery

1 $('#form1').validationEngine({ 2 'custom_error_messages': { 3 '#textForm': { 4 'required': { 5 'message': 'textFormを入力してください' 6 } 7 } 8 } 9 }); 10

投稿2018/09/28 06:53

x_x

総合スコア13749

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

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

takeke

2018/09/30 17:07

回答ありがとうございます! data-errormessage-*属性の方が簡単で使いやすいのでとても助かりました! オプションのcustom_error_messagesの方ですが、こちらの場合はどこに記述したらいいのでしょうか? 記事も分かる範囲で読んでみたのですが、どこに書くのかがイマイチわかりませんでした>< このような記述はどこに書いてもいいものなのでしょうか?
x_x

2018/10/02 01:18

JavaScriptのコードが提示されていないのですが、すでにどこかにvalidationEngine()メソッドを記述しているのでは? そうでなければ動きませんし、参考にしたサイトでも記述するように書いてあります。
takeke

2018/10/04 06:52

ありがとうございます! ダウンロードしたファイルが複数あって、質問文のものとは別のjsファイルの方に書いてありました。そちらは記述量が多いので字数制限でこちらには載せられませんでした。 validationEngine()の中に回答いただいた記述を追加ってことですね!ありがとうございましたm(_ _)m
guest

0

同じメッセージがでてきますよね?

これ実際に試した上で言ってますか?
私が使っていた頃はあくまで設定したinputにのみ出てましたけど。

例えばミニマムだとこんな感じ。

html

1<input class="validate[required]" type="text" name="a"> 2<input class="validate[required]" type="text" name="b">

しかも提示されたjsファイルはあくまでvalidationEngineの日本語エラーメッセージの設定ファイルです。
冒頭にそのように書いてありますね。

Japanese language file for jquery.validationEngine.js (ver2.0)

確認しなければならないのはValidationEngineの本体のjsではないでしょうか。
つくりとしてvalidateクラスが設定されているinputを探し出してその中に設定されているルールに基づいてthis(要は自身)の値のチェックを行い、thisに対してエラーメッセージを出しているので、
「使い分け」というとあくまでそれぞれの入力コントロールに対してvalidate[]で設定するだけです。

提示された紹介記事のSTEP3あたりを読み込めば理解はできそうです。

実際にどこまで試してみられたのでしょうか?

Githubにある公式の解説も熟読してみてください。

投稿2018/09/27 11:53

m.ts10806

総合スコア80765

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

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

takeke

2018/09/30 16:45

回答ありがとうございます! 例えばですが、必須項目として、名前入力<input class="validate[required]" type="text" ~~>と、その他記入欄<textarea class="validate[required]"~~>とかで、同じフォームの中の2つの項目で使っていると同じエラーメッセージが出てきてしまうので、どうしたものかと、、、という感じです。 当初は最初の名前入力のエラー表示を自分がだしたいような文言にしたかっただけだったので、日本語用のrequiredの文字を変えたのですが、他で使うときに問題がでてくると思った次第でした。 記事自体は勿論読んでおります。本体のjsの方を書き換える必要があるんでしょうか?本体も載せたいところでしたが字数がオーバーしてしまうので無理そうでした。 あと、回答いただいた記述例がよくわからないのですが、ミニマムというのは、最小限で記述するならこう書きます。の意ですか? 2つの<input>でそれぞれ同じエラー表示ですよね?自分がやりたいのは、name="a"のエラーでは”〇〇が必須です”、 name="b"のエラーでは”✕✕が必須です”みたいな感じです。 理解が追いついていなくてもうしわけないです_(._.)_
m.ts10806

2018/09/30 21:25

本体JSは改修していない限りライブラリ・プラグインのURLだけでも良いです。 具体的にどのような文言にしたいかを記載されたほうが良いかと。 もし同じrequiredでも全く別の文言にしたいのであればルールを追加する必要があるでしょうし、 ルールを追加するのであれば処理も追加しなければなりませんし。 例えばこの記事にあるように設定ファイルでもできそうですけど。 https://kata-tip.com/jquery-validation
takeke

2018/10/04 07:00

なるほど、今回は配布でGitHubからダウンロードしたのでhttps://github.com/posabsolute/jQuery-Validation-Engine/blob/master/js/jquery.validationEngine.jsこんな感じで載せたらいいということですね。 そうですよね、同じrequiredで別の文言なのでjsの方に記述追加しなきゃいけなそうでした。 とりあえず<input>の中にdata-errormessage-value-missing="好きなテキスト"で対応できるようでした。 参考URLありがとうございましたm(_ _)m
m.ts10806

2018/10/04 07:02

解決したようで何よりです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問