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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

2358閲覧

複数のフォームで個別にsubmitしたら、エラー後はそれぞれのフォーム送信位置にページを移動させたい

southern_flavor

総合スコア70

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/01/19 20:10

編集2019/01/20 02:47

###知りたいこと
画面内に複数ある入力フォーム(フォーム1,フォーム2)でsubmitしてエラーになったら、それぞれクリックしたフォームグループの位置でページが移動するようにしたいです。
現状は、フォーム1でsubmitしたら、フォーム2のグループに移動してしまいます。
これを

フォーム1でsubmit→エラー→フォーム1を視認できる位置で保持
フォーム2でsubmit→エラー→フォーム2が視認できる位置で保持

としたいです。

###フォームの仕様について
cakePHPによって動的に生成された電話番号を入力する複数の入力フォームがあります。
バリデーションは、バックエンド側とクライアントサイド側(下記コード)の二つでかけています。
エラーになるとspan要素に表示されるようになっており、正常に送信された場合は別のページへ遷移します。
クラス名を連番でふっていますが、正しい入力がなかったときにそれぞれの入力フォーム付近に個別で表示させるためです。

html

1<!--フォーム1--> 2<form action="/send"> 3<input type="tel" name="tel" class="tel" required="required"><span id="errorMessage" style="color:red;"><?=h($errorMessage)?></span> 4<button type="submit" class="submitButton">ここをクリック</button> 5</form> 6 7<!--フォーム2--> 8<form action="/send"> 9<input type="tel" name="tel" class="tel" required="required"><span id="errorMessage" style="color:red;"><?=h($errorMessage)?></span> 10<button type="submit" class="submitButton">ここをクリック</button> 11</form> 12 13<script> 14jQuery(document).ready(function($){ 15 $(".submitButton").on('click',function(e){ 16 var connectCont = $(".submitButton").index(this); 17 var showCont = connectCont+1; 18 19 if(!$('input.tel'+(showCont)).val().match(/^0[7-9]0-?[1-9]\d{3}-?\d{4}$/) ){//携帯番号のみを許可するバリデーション 20 $('.error'+(showCont)).text('番号を正しく入力してください'); 21 return false; 22 } 23 }); 24}); 25 26//バックエンド側で吐き出された特定のエラー文言に対して判定 27$(window).on('load', function(){ 28 var errorMsg = [ 29 'エラーメッセージ1です', 30 'エラーメッセージ2です' 31 ]; 32 if ($('#errorMessage').is(":contains('"+errorMsg[0]+"')") || 33 $('#errorMessage').is(":contains('"+errorMsg[1]+"')") ) { 34 35 $("input.tel").each(function(i){ //ここではクラスを連番で付与し、それぞれのフォームでエラーになったらそのときクリックしたフォームの位置に移動させる(ここだけがうまくいかない) 36 var $elem = $(this); 37 $elem.attr('class','tel' + (i+1)); 38 $elem.addClass('error' + (i+1)); 39 40 var pos = $('.tel' + (i+1)); 41 if (pos.size()) { 42 $(window).scrollTop(pos.offset().top); 43 } 44 }); 45 } 46}); 47</script>

解決方法等、ご教授いただけましたら幸いです。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/01/20 02:10

上のフォーム下のフォームというのがよく分かりません。 コードはなるべく誰でも再現確認できる状態でご提示ください。 もし同じ画面内にあるのでしたら同じidが振られているhtml的にNGな状態なのでJavaScriptからも正常な操作はできないとは思いますが。
southern_flavor

2019/01/20 02:57

ご指摘ありがとうございます。 上のフォーム、下のフォームというのは、画面内の上、下にあるそれぞれフォームというで意味で書きました。 フォーム1、フォーム2ということを説明に追加しました。 他の方にもご指摘があったように、同じidが複数、同じname属性複数というところでミスが生じているので、修正します。
guest

回答2

0

多重登録防止の施策抜きで回答します。
ハッシュを利用すればいいのです。

※ これの対策は結果になるように改変サーバー側を改変すればいいのです。

html

1<!--フォーム1--> 2<form action="/send#form1" id="form1"> 3 <input type="tel" name="tel"> 4 <?php if($errorMessage[”form1"]) :?> 5 <span class="errorMessage"><?=h($errorMessage[”form1"])?></span> 6 <?php endif;?> 7 <button>ここをクリック</button> 8</form> 9 10<!--フォーム2--> 11<form action="/send#form2" id="form2"> 12 <input type="tel" name="tel"> 13 <?php if($errorMessage[”form2"]) :?> 14 <span class="errorMessage"><?=h($errorMessage[”form2"])?></span> 15 <?php endif;?> 16 <button>ここをクリック</button> 17</form>

投稿2019/01/20 03:13

編集2019/01/20 03:16
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

southern_flavor

2019/01/20 04:51

ご回答ありがとうございます。 ページ内リンクのようにするのですね。 エラーの際に/send#form1等が通るようにすることができるかまた試してみます。
guest

0

ベストアンサー

こんにちは

最初の確認事項になりますが、例示して頂いている input 要素は現物からのコピペでしょうか? それとも例示して問題ないよう編集済みの状態ですか?

というのも上下のフォームともに name 値が同じものが割り当てられているように見えます。

html

1<input name="tel">

サブミット時は name パラメータ値を元に判断する場合が多いですので、下のボタンを押した心算でも上側のボタンが押されたと判断してしまっている可能性があります。

単純な編集ミスの場合は済みません。順番にノイズを減らして問題を絞っていきましょう。

投稿2019/01/20 02:51

Yosuke-Kawakami

総合スコア123

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

southern_flavor

2019/01/20 03:02

ご回答ありがとうございます。 こちらは実際のものをそのまま貼ることはできないため、編集した状態のものです。 現物を確認したところ、こちらと同様、name属性が同じ値になっていたのでこちらから修正する必要がありそうですね・・。 現在、手元に再現できる環境がないので、来週試してみてまたご報告します。
Yosuke-Kawakami

2019/01/20 03:14 編集

順番に切り分けしていきましょう(顔文字) 例示して頂いた HTML 文のみの場合で動作を確認したところ、Google Chrome 71.0 および Microsoft Edge 17 にて、期待する動作が実現されていることを確認しました。 # Edge は画面のリフレッシュを調整する必要がありそうです ソース自体は概ね問題ないということならば、次はフレームワークとの連携部分の問題かもしれません。フレームワークはそれの使い方に合わせた記述をする必要がありますので、詳しく確認してみるといいかもしれません。 (例えば一画面中に複数の Submit ボタンを配置する場合は所定の書き方がある、など)
southern_flavor

2019/01/20 04:47

動作確認までしていただき、ありがとうございます。 なるほど、フレームワーク側の問題だとすると、また新たな改善を行う必要がありそうですね。 バックエンドはcakePHPなのでこちらもあわせて確認してみます。
Yosuke-Kawakami

2019/01/20 04:55 編集

# 一言コメにつきスルー推奨です > フレームワーク側の問題だとすると、また新たな改善を行う必要がありそうですね asahina1979 さんの回答にあるように、id 値や name 値の修正だけで収まると思いますよ。気楽にいきましょう!
southern_flavor

2019/01/22 09:24

おっしゃる通り、値の変更がどうしても必要でした。 フレームワークの仕様を変更するしかなさそうです。 この度はありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問