前提・実現したいこと
HTMLでフォームを作りJavaScriptでバリデーション、Ajaxでデータの送信を行おうとしています。
データは表示用のデータとデータベースに送信するデータを別にし、
バリデーションでエラーが見つかった場合は表示用のメニューや確認画面が出ないようにしています。
発生している問題・エラーメッセージ
ここで、データベースに送るべきデータにコンソール等で不正な変更が行われた時にそれを検知、或いはエラーを返すことができないので
それをできるようにしたいのですがやり方の検討がてんで付きません。
該当のソースコード
現在の状況は以下のようになっています。
HTML
1 <div id="hoge_valid"></div> 2 <div id="hoge"> 3 <input type="radio" name="hoge_a" value="2" id="D"><label for="D">D</label><br><br> 4 <input type="radio" name="hoge_a" value="1" id="E"><label for="E">E</label><br><br> 5 <input type="radio" name="hoge_a" value="0" id="F"><label for="F">F</label><br><br> 6 </div> 7<!-- ↑収集する値は文字列。 --> 8 9 <div id="choice"> 10 <input type="checkbox" name="piyo" value="0" id="piyo0"><label for="piyo0">piyo0</label><br><br> 11 <input type="checkbox" name="piyo" value="1" id="piyo1"><label for="piyo1">piyo1</label><br><br> 12 <input type="checkbox" name="piyo" value="2" id="piyo2"><label for="piyo2">piyo2</label><br><br> 13 <input type="checkbox" name="piyo" value="3" id="piyo3"><label for="piyo3">piyo3</label><br><br> 14<!-- 以下同様 --> 15 </div> 16 17<!-- ↑収集する値は配列。後で文字列にします。 --> 18<p>hoge:<span class="hoge_echo"></span></p> 19<p>piyo:<span class="piyo_echo"></span></p> 20<p><input type="button" value="check" id="is_it_OK"></p><!-- 確認画面を開くボタン -->
js
1var $hoge=""; 2var $piyo=""; 3var $error_hoge_=""; 4var $hoge_echo_=""; 5var $error_piyo_=""; 6var $piyo_echo_=""; 7function valid_hoge($hoge) 8{ 9 $error_hoge=""; 10 if ((!$hoge&&$hoge!=0)) { 11 $error_hoge = "<div id=\"hoge_valid\"><p style=\"color:#ff2800;\">"+"入力されていません。"+"</p></div>"; 12 } else if ((parseInt($hoge)<0||parseInt($hoge)>2)&&!isNumeric($hoge)) { 13 $error_hoge = "<div id=\"hoge_valid\"><p style=\"color:#ff2800;\">"+"不正なPOSTです。"+"</p></div>"; 14 }else{ 15 $error_hoge="<div id=\"hoge_valid\"></div>"; 16 } 17 return $error_hoge; 18} 19 20function valid_hoge_echo($hoge) 21{ 22 $hoge_array =[/*配列の中身*/]; 23 $hoge_echo =""; 24 $error_hoge =""; 25 $error_message=valid_hoge($hoge); 26 if ($error_message === "<div id=\"hoge_valid\"></div>") { 27 $hoge_echo = $hoge_array[parseInt($hoge)]; 28 } 29 return $hoge_echo; 30} 31 32 33function valid_piyo($piyo){ 34 $error_piyo=""; 35 $piyo2 =[/*配列の中身*/]; 36 if ($piyo.length==0) { 37 $error_piyo = "<div id=\"piyo_valid\"><p style=\"color:#ff2800;\">"+"入力されていません。"+"</p></div>"; 38 }else{ 39 for ($i = 0; $i <$piyo.length ; $i++) { 40 if (((parseInt($piyo[$i])<0||parseInt($piyo[$i])>($piyo2).length-1)||!Number.isInteger(parseInt($piyo[$i]))||!Array.isArray($piyo))&&parseInt($piyo[$i])==$piyo[$i]) { 41 $error_piyo = "<div id=\"piyo_valid\"><p style=\"color:#ff2800;\">"+"不正なPOSTです。"+"</p></div>"; 42 break; 43 } 44 } 45 $error_piyo="<div id=\"piyo_valid\"></div>"; 46 } 47 return $error_piyo; 48} 49 50function valid_piyo_echo($piyo) 51{ 52 var $piyo_echo = ""; 53 $error_message = valid_piyo($piyo); 54 $piyo2 =[/*配列の中身*/]; 55 var $array= new Array(); 56 if ($error_message==="<div id=\"piyo_valid\"></div>") { 57 for(var i=0;i<$piyo.length;i++){ 58 if($piyo_echo!=="") $piyo_echo+=","; 59 $piyo_echo+=$piyo2[parseInt($piyo[i])]; 60 }; 61 } 62 return $piyo_echo; 63} 64 65/*確認画面を開かせる前にエラーメッセージが出ているかで判断していますがコンソールなどで値を変えられるとこの関数ではどうにもならないです。*/ 66$(function(){ 67 $("#piyo input").change(function(){ 68 ary=document.getElementsByName('piyo'); 69 $piyo=new Array(); 70 if (ary.length>1) { 71 for (var i = 0; i <ary.length; i++) { 72 if (ary[i].checked) { 73 $piyo.push($(ary[i]).val()); 74 } 75 } 76 } 77 $error_piyo_=valid_piyo($piyo); 78 $piyo_echo_=valid_piyo_echo($piyo); 79 $('#piyo_valid').html(valid_piyo($piyo)); 80 }); 81 $("#hoge input").change(function(){ 82 83 $hoge=$("#hoge input:checked").val(); 84 $('#hoge_valid').html(valid_hoge($hoge)); 85 $error_hoge_=valid_hoge($hoge); 86 $hoge_echo_=valid_hoge_echo($hoge); 87 }); 88 $('#is_it_OK').on('click', function() { 89 $('span.hoge_echo').text($hoge_echo_); 90 $('span.piyo_echo').text($piyo_echo_); 91}); 92}); 93 94
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。