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

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

ただいまの
回答率

87.48%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 5,320

score 60

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

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

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

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

<input class="validate[required]" type="text" placeholder="名前入力してください" size="50" maxlength="50" name="name_form" id="textForm">
;/*****************************************************************
 * Japanese language file for jquery.validationEngine.js (ver2.0)
 *
 * Transrator: tomotomo ( Tomoyuki SUGITA )
 * http://tomotomoSnippet.blogspot.com/
 * Licenced under the MIT Licence
 *******************************************************************/
(function($){
    $.fn.validationEngineLanguage = function(){
    };
    $.validationEngineLanguage = {
        newLang: function(){
            $.validationEngineLanguage.allRules = {
                "required": { // Add your regex rules here, you can take telephone as an example
                    "regex": "none",
                    "alertText": "* 必須項目です",
                    "alertTextCheckboxMultiple": "* 選択してください",
                    "alertTextCheckboxe": "* チェックボックスをチェックしてください"
                },
                "requiredInFunction": { 
                    "func": function(field, rules, i, options){
                        return (field.val() == "test") ? true : false;
                    },
                    "alertText": "* Field must equal test"
                },
                "minSize": {
                    "regex": "none",
                    "alertText": "* ",
                    "alertText2": "文字以上にしてください"
                },
                "groupRequired": {
                    "regex": "none",
                    "alertText": "* You must fill one of the following fields"
                },
                "maxSize": {
                    "regex": "none",
                    "alertText": "* ",
                    "alertText2": "文字以下にしてください"
                },
                "min": {
                    "regex": "none",
                    "alertText": "* ",
                    "alertText2": " 以上の数値にしてください"
                },
                "max": {
                    "regex": "none",
                    "alertText": "* ",
                    "alertText2": " 以下の数値にしてください"
                },
                "past": {
                    "regex": "none",
                    "alertText": "* ",
                    "alertText2": " より過去の日付にしてください"
                },
                "future": {
                    "regex": "none",
                    "alertText": "* ",
                    "alertText2": " より最近の日付にしてください"
                },    
                "maxCheckbox": {
                    "regex": "none",
                    "alertText": "* チェックしすぎです"
                },
                "minCheckbox": {
                    "regex": "none",
                    "alertText": "* ",
                    "alertText2": "つ以上チェックしてください"
                },
                "equals": {
                    "regex": "none",
                    "alertText": "* 入力された値が一致しません"
                },
                "creditCard": {
                    "regex": "none",
                    "alertText": "* 無効なクレジットカード番号"
                },
                "phone": {
                    // credit: jquery.h5validate.js / orefalo
                    "regex": /^([\+][0-9]{1,3}([ \.\-])?)?([\(][0-9]{1,6}[\)])?([0-9 \.\-]{1,32})(([A-Za-z \:]{1,11})?[0-9]{1,4}?)$/,
                    "alertText": "* 電話番号が正しくありません"
                },
                "email": {
                    // Shamelessly lifted from Scott Gonzalez via the Bassistance Validation plugin http://projects.scottsplayground.com/email_address_validation/
                    "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,
                    "alertText": "* メールアドレスが正しくありません"
                },
                "integer": {
                    "regex": /^[\-\+]?\d+$/,
                    "alertText": "* 整数を半角で入力してください"
                },
                "number": {
                    // Number, including positive, negative, and floating decimal. credit: orefalo
                    "regex": /^[\-\+]?((([0-9]{1,3})([,][0-9]{3})*)|([0-9]+))?([\.]([0-9]+))?$/,
                    "alertText": "* 数値を半角で入力してください"
                },
                "date": {
                    "regex": /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/,
                    "alertText": "* 日付は半角で YYYY-MM-DD の形式で入力してください"
                },
                "ipv4": {
                    "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]))$/,
                    "alertText": "* IPアドレスが正しくありません"
                },
                "url": {
                    "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,
                    "alertText": "* URLが正しくありません"
                },
                "onlyNumberSp": {
                    "regex": /^[0-9\ ]+$/,
                    "alertText": "* 半角数字で入力してください"
                },
                "onlyLetterSp": {
                    "regex": /^[a-zA-Z\ \']+$/,
                    "alertText": "* 半角アルファベットで入力してください"
                },
                "onlyLetterNumber": {
                    "regex": /^[0-9a-zA-Z]+$/,
                    "alertText": "* 半角英数で入力してください"
                },
                // --- CUSTOM RULES -- Those are specific to the demos, they can be removed or changed to your likings
                "ajaxUserCall": {
                    "url": "ajaxValidateFieldUser",
                    // you may want to pass extra data on the ajax call
                    "extraData": "name=eric",
                    "alertText": "* This user is already taken",
                    "alertTextLoad": "* Validating, please wait"
                },
                "ajaxNameCall": {
                    // remote json service location
                    "url": "ajaxValidateFieldName",
                    // error
                    "alertText": "* This name is already taken",
                    // if you provide an "alertTextOk", it will show as a green prompt when the field validates
                    "alertTextOk": "* This name is available",
                    // speaks by itself
                    "alertTextLoad": "* Validating, please wait"
                },
                "validate2fields": {
                    "alertText": "* 『HELLO』と入力してください"
                }
            };

        }
    };
    $.validationEngineLanguage.newLang();
})(jQuery);

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2018/09/27 20:57

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

    キャンセル

  • takeke

    2018/10/01 01:00

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

    キャンセル

  • この投稿は削除されました

回答 2

checkベストアンサー

+2

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

<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

  $('#form1').validationEngine({
    'custom_error_messages': {
      '#textForm': {
        'required': {
          'message': 'textFormを入力してください'
        }
      }
    }
  });

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/01 02:07

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

    キャンセル

  • 2018/10/02 10:18

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

    キャンセル

  • 2018/10/04 15:52

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

    キャンセル

+1

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

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

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

<input class="validate[required]" type="text" name="a">
<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/10/01 01:45

    回答ありがとうございます!
    例えばですが、必須項目として、名前入力<input class="validate[required]" type="text" ~~>と、その他記入欄<textarea class="validate[required]"~~>とかで、同じフォームの中の2つの項目で使っていると同じエラーメッセージが出てきてしまうので、どうしたものかと、、、という感じです。

    当初は最初の名前入力のエラー表示を自分がだしたいような文言にしたかっただけだったので、日本語用のrequiredの文字を変えたのですが、他で使うときに問題がでてくると思った次第でした。

    記事自体は勿論読んでおります。本体のjsの方を書き換える必要があるんでしょうか?本体も載せたいところでしたが字数がオーバーしてしまうので無理そうでした。

    あと、回答いただいた記述例がよくわからないのですが、ミニマムというのは、最小限で記述するならこう書きます。の意ですか?
    2つの<input>でそれぞれ同じエラー表示ですよね?自分がやりたいのは、name="a"のエラーでは”〇〇が必須です”、 name="b"のエラーでは”✕✕が必須です”みたいな感じです。

    理解が追いついていなくてもうしわけないです_(._.)_

    キャンセル

  • 2018/10/01 06:25

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

    キャンセル

  • 2018/10/04 16: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

    キャンセル

  • 2018/10/04 16:02

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

    キャンセル

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

  • ただいまの回答率 87.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る