###知りたいこと
画面内に複数ある入力フォーム(フォーム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>
解決方法等、ご教授いただけましたら幸いです。
回答2件
あなたの回答
tips
プレビュー