ブレイクスルーjavascript(SHOEISYA)の22pから32pに記述してある、フォームに書き込まれた内容を即時に検証(文字数や適切な単語が利用されているかなど)でき、
何か問題があれば注意が表示される機能を実際に作るという内容に疑問があったので質問します。
実際に作ってみたものの、動作しません。javascriptソースを確認してみるといくつか誤植があったので修正してみたのですが、それでも動きませんでした。
フォームに文字を入力し、それに何かしらの間違い(文字数が8文字以内かつ、4文字以上、必須項目)を犯せば注意が表示される仕組みなのですが、
その注意が表示されないのです。
javascript
1function AppModel(attrs) { 2 this.val =""; 3 //使用するvalidation patternを設定するオブジェクトを追加する。 4 this.attrs = { 5 required: "",//値が空かどうかを調べるrequiredメソッド。 6 maxlength: 8, 7 minlength: 4 8 }; 9 10 this.listeners = { 11 valid: [],//valid…正当な、有効な 12 invalid: []//invalid…病人 13 }; 14} 15//AppModelのプロトタイプたち。つまりインスタンスに継承させたいものだ。 16 17//this.valの値が正しいのかどうかを調べるvalidateメソッド。 18AppModel.prototype.validate = function() { 19 var val; 20 //バリデーションでエラーが出たものを保存しておくための空の配列 21 this.errors = []; 22 23 for(var key in this.attrs) { 24 val = this.attrs[key]; 25 if(!this[key](val)) this.errors.push(key); 26 } 27 this.trigger(!this.errors.length ? "valid" : "invalid"); 28}; 29 30//第一引数に配列の添え字、第二引数に第一引数を処理する関数を指定した。 31AppModel.prototype.on = function(event, func) { 32 //AppModelがもつ連想配列listeners内の、eventという添え字を持つモノ(恐らく配列だろうが、いまのところeventを添え字に持つ配列は、見当たらない。)の末尾にfuncという関数を挿入している。 33 this.listeners[event].push(func); 34}; 35 36AppModel.prototype.trigger = function(event) { 37 $.each(this.listeners[event], function() { 38 //コンストラクター内でのthisは、インスタンスを表すので、this()は、AppModel()なのか? 39 //▼このthis()の意味は良くわからない。(1/27) 40 this(); 41 }); 42}; 43//恐らくセッター。受け取ったvalが、AppModelのthis.valと一致すれば処理を行わない。一致しなければ、this.valに引数を代入する。 44AppModel.prototype.set = function(val) { 45 if(this.val === val) return; 46 this.val = val; 47 this.validate(); 48}; 49 50//値が空かどうかを判定するrequiredメソッド。 51AppModel.prototype.required = function() { 52 return this.val !== ""; 53}; 54//値の文字数が引数のnum以上かどうかを判定するmaxlengthメソッド。 55AppModel.prototype.maxlength = function(num) { 56 return num >= this.val.length; 57}; 58//値の文字数が引数num以下かどうかを判定するminlengthメソッド。 59AppModel.prototype.minlength = function(num) { 60 return num <= this.val.length; 61}; 62 63 64function AppView(el) { 65 66 this.initialize(el); 67 //インスタンス化したとき、handleEventsメソッドを実行するようにしている。 68 this.handleEvents(); 69} 70 71AppView.prototype.initialize = function(el) { 72 this.$el = $(el); 73 74 //this.$elの隣のliをthis.$listに代入する。 75 this.$list = this.$el.next().children(); 76 77 var obj = this.$el.data(); 78 79 if(this.$el.prop("required")) { 80 obj["required"] = ""; 81 } 82 83 this.model = new AppModel(obj); 84}; 85 86AppView.prototype.handleEvents = function() { 87 var self = this; 88 //handleEventsメソッドでは、keyupイベントのイベントハンドラにonKeyupを登録する。 89 this.$el.on("keyup", function(e) { 90 self.onKeyup(e); 91 }); 92 93 this.model.on("valid", function() { 94 self.onValid(); 95 }); 96 97 this.model.on("invalid", function() { 98 self.onInvalid(); 99 }); 100}; 101//keyupイベントが発生した時に実行されるonKeyupメソッドを実装する。 102AppView.prototype.onKeyup = function(e) { 103 var $taget = $(e.currentTarget); 104 //this.modelのsetメソッドを使用して、inputの値をmodelにセットする。$target.valのvalは、requiredやmaxlengthか? 105 this.model.set($target.val()); 106}; 107 108//this.$elのclass="error"を消し、this.$listを非表示にする。 109AppView.prototype.onValid = function() { 110 this.$el.removeClass("error"); 111 this.$list.hide(); 112}; 113 114//そしてthis.$elにclass="error"を付与し、this.$listの中で該当エラーのみ表示する。 115AppView.prototype.onInvalid = function() { 116 var self =this; 117 this.$el.addClass("error"); 118 this.$list.hide(); 119 120 $.each(this.model.errors, function(index, val) { 121 self.$list.filter("[data-error=\"" + val + "\"]").show(); 122 }); 123}; 124//inputを引数で指定した関数で、個別に処理する。 125$("input").each(function() { 126 new AppView(this); 127});
html
1<div class="container"> 2 <div class="row"> 3 <div class="col"> 4 <label for="">権限を作成</label> 5 </div> 6 <div class="col"> 7 <input type="text" placeholder="4文字以上、8文字以内で入力して下さい" data-minlength="4" data-maxlength="8" required><!-- requiredは、フォームへの入力や洗濯を必須とする。 --> 8 <ul> 9 <li data-error="required">必須項目です。</li> 10 <li data-error="minlength">4文字以上で入力して下さい。</li> 11 <li data-error="maxlength">8文字以内で入力して下さい。</li> 12 </ul> 13 </div> 14 </div><!-- row --> 15 <div class="row"> 16 <div class="col"> 17 <label for="">権限を作成</label> 18 </div> 19 <div class="col"> 20 <input type="text" placeholder="4文字以上、8文字以内で入力して下さい" data-minlength="4" data-maxlength="8" required> 21 <ul> 22 <li data-error="required">必須項目です。</li> 23 <li data-error="minlength">4文字以上で入力して下さい。</li> 24 <li data-error="maxlength">8文字以内で入力して下さい。</li> 25 </ul> 26 </div> 27 </div><!-- row --> 28</div><!-- container -->
問題のソースコード
http://jsdo.it/rrrrrrrr/e5jz
回答2件
あなたの回答
tips
プレビュー