質問編集履歴
2
再度、コードを修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
<button type="submit" class="submitButton">ここをクリック</button>
|
|
22
22
|
</form>
|
|
23
23
|
|
|
24
|
-
<!--フォーム2--
|
|
24
|
+
<!--フォーム2-->
|
|
25
25
|
<form action="/send">
|
|
26
26
|
<input type="tel" name="tel" class="tel" required="required"><span id="errorMessage" style="color:red;"><?=h($errorMessage)?></span>
|
|
27
27
|
<button type="submit" class="submitButton">ここをクリック</button>
|
1
コードと説明の修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,7 +1,13 @@
|
|
|
1
1
|
###知りたいこと
|
|
2
|
-
|
|
2
|
+
画面内に複数ある入力フォーム（フォーム1,フォーム2）でsubmitしてエラーになったら、それぞれクリックしたフォームグループの位置でページが移動するようにしたいです。
|
|
3
|
-
現状は、
|
|
3
|
+
現状は、フォーム1でsubmitしたら、フォーム2のグループに移動してしまいます。
|
|
4
|
+
これを
|
|
4
5
|
|
|
6
|
+
フォーム1でsubmit→エラー→フォーム1を視認できる位置で保持
|
|
7
|
+
フォーム2でsubmit→エラー→フォーム2が視認できる位置で保持
|
|
8
|
+
|
|
9
|
+
としたいです。
|
|
10
|
+
|
|
5
11
|
###フォームの仕様について
|
|
6
12
|
cakePHPによって動的に生成された電話番号を入力する複数の入力フォームがあります。
|
|
7
13
|
バリデーションは、バックエンド側とクライアントサイド側（下記コード）の二つでかけています。
|
|
@@ -9,13 +15,17 @@
|
|
|
9
15
|
クラス名を連番でふっていますが、正しい入力がなかったときにそれぞれの入力フォーム付近に個別で表示させるためです。
|
|
10
16
|
|
|
11
17
|
```html
|
|
12
|
-
|
|
18
|
+
<!--フォーム1-->
|
|
19
|
+
<form action="/send">
|
|
13
20
|
<input type="tel" name="tel" class="tel" required="required"><span id="errorMessage" style="color:red;"><?=h($errorMessage)?></span>
|
|
14
21
|
<button type="submit" class="submitButton">ここをクリック</button>
|
|
22
|
+
</form>
|
|
15
23
|
|
|
16
|
-
|
|
24
|
+
<!--フォーム2--
|
|
25
|
+
<form action="/send">
|
|
17
26
|
<input type="tel" name="tel" class="tel" required="required"><span id="errorMessage" style="color:red;"><?=h($errorMessage)?></span>
|
|
18
27
|
<button type="submit" class="submitButton">ここをクリック</button>
|
|
28
|
+
</form>
|
|
19
29
|
|
|
20
30
|
<script>
|
|
21
31
|
jQuery(document).ready(function($){
|
|
@@ -39,7 +49,7 @@
|
|
|
39
49
|
if ($('#errorMessage').is(":contains('"+errorMsg[0]+"')") ||
|
|
40
50
|
$('#errorMessage').is(":contains('"+errorMsg[1]+"')") ) {
|
|
41
51
|
|
|
42
|
-
$("input.tel").each(function(i){ //ここではクラスを連番で付与し、それぞれのフォームでエラーになったらそのときクリックしたフォームの位置に移動させる（
|
|
52
|
+
$("input.tel").each(function(i){ //ここではクラスを連番で付与し、それぞれのフォームでエラーになったらそのときクリックしたフォームの位置に移動させる（ここだけがうまくいかない）
|
|
43
53
|
var $elem = $(this);
|
|
44
54
|
$elem.attr('class','tel' + (i+1));
|
|
45
55
|
$elem.addClass('error' + (i+1));
|