質問編集履歴

3

他のテキストボックスに影響が出ないよう自身のerrorのみ判定するように修正

2019/03/19 08:45

投稿

risecom14
risecom14

スコア7

test CHANGED
File without changes
test CHANGED
@@ -164,7 +164,7 @@
164
164
 
165
165
  $('.txb').on('blur', function() {
166
166
 
167
- limitCheck();
167
+ limitCheck($(this));
168
168
 
169
169
  });
170
170
 

2

文字数オーバーerror判定用のclass付与位置を変更

2019/03/19 08:44

投稿

risecom14
risecom14

スコア7

test CHANGED
File without changes
test CHANGED
@@ -126,25 +126,25 @@
126
126
 
127
127
  function cntChar(elm) {
128
128
 
129
- 'use strict';
129
+ 'use strict';
130
130
 
131
- var p = elm.parents('.hoge');
131
+ var p = elm.parents('.hoge');
132
132
 
133
- var cnt = elm.val().length;
133
+ var cnt = elm.val().length;
134
134
 
135
- var limit = parseInt(p.find('.limit').text(), 10);
135
+ var limit = parseInt(p.find('.limit').text(), 10);
136
136
 
137
- p.find('.num').text(cnt);
137
+ p.find('.num').text(cnt);
138
138
 
139
- if (cnt > limit) {
139
+ if (cnt > limit) {
140
140
 
141
- p.find('.num').addClass('error');
141
+ elm.addClass('error');
142
142
 
143
- } else {
143
+ } else {
144
144
 
145
- p.find('.num').removeClass('error');
145
+ elm.removeClass('error');
146
146
 
147
- }
147
+ }
148
148
 
149
149
  }
150
150
 

1

文字数オーバーしたテキストボックスから別のテキストボックスにfocusを移すと無限にalertが出てしまっていたのでblur時の処理を修正しました

2019/03/19 08:43

投稿

risecom14
risecom14

スコア7

test CHANGED
File without changes
test CHANGED
@@ -68,51 +68,57 @@
68
68
 
69
69
  ```javascript
70
70
 
71
- // 制限文字数チェック
71
+ function limitCheck(elm) {
72
72
 
73
- function limitCheck() {
73
+ 'use strict';
74
74
 
75
- 'use strict';
75
+ var msg = '';
76
76
 
77
- var msg = '';
77
+ var flg = 0;
78
78
 
79
- var flg = 0;
80
-
81
- var checkTgt = '.txb';
79
+ var checkTgt = '.txb';
82
80
 
83
81
 
84
82
 
85
- $('.error').each(function() {
83
+ if (event.type === 'blur') {
86
84
 
87
- var p = $(this).parents('.hoge');
85
+ if (elm.hasClass('error')) {
88
86
 
89
- var limit = parseInt(p.find('.limit').text(), 10);
87
+ var limit = parseInt(elm.siblings('.fuga').children('.limit').text(), 10);
90
88
 
91
- msg += $(this).closest('.hoge').find('.name').text() + 'は' + limit + '文字以内で入力してください。\n';
89
+ msg = limit + '文字以内で入力してください。\n' + 'イベントの種類:' + event.type;
92
90
 
91
+ alert(msg);
92
+
93
+ }
94
+
95
+ } else {
96
+
97
+ $('.error').each(function () {
98
+
99
+ var p = $(this).parents('.hoge');
100
+
101
+ var limit = parseInt(p.find('.limit').text(), 10);
102
+
103
+ msg += $(this).closest('.hoge').find('.name').text() + 'は' + limit + '文字以内で入力してください。\n' + 'イベントの種類:' + event.type + '\n';
104
+
93
- flg++;
105
+ flg++;
94
106
 
95
107
  });
96
108
 
97
109
  if (flg !== 0) {
98
110
 
99
- if (event.type === 'blur') {
111
+ $(checkTgt).off('blur');
100
112
 
101
- alert(msg);
113
+ event.preventDefault();
102
114
 
103
- } else {
115
+ alert(msg);
104
116
 
105
- $(checkTgt).off('blur');
106
-
107
- event.preventDefault();
108
-
109
- alert(msg);
110
-
111
- $(checkTgt).blur();
117
+ $(checkTgt).blur();
112
-
113
- }
114
118
 
115
119
  }
120
+
121
+ }
116
122
 
117
123
  }
118
124
 
@@ -162,7 +168,7 @@
162
168
 
163
169
  });
164
170
 
165
- $('.btn').on('click', function(e) {
171
+ $('.btn').on('click', function() {
166
172
 
167
173
  limitCheck();
168
174