エラーメッセージの表示方法でよくわからないことがでてきたので質問させていただきます。
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"が出てきた場合、同じメッセージがでてきますよね?
こちらそれぞれ別のメッセージ表示するにはどうしたらよいでしょうか?
回答2件
あなたの回答
tips
プレビュー