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

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

ただいまの
回答率

90.51%

  • JavaScript

    16429questions

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

  • HTML

    8975questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

フォームにおけるコンソール上での変数の値の変更を避ける方法について

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 120

penginer

score 24

 前提・実現したいこと

HTMLでフォームを作りJavaScriptでバリデーション、Ajaxでデータの送信を行おうとしています。
データは表示用のデータとデータベースに送信するデータを別にし、
バリデーションでエラーが見つかった場合は表示用のメニューや確認画面が出ないようにしています。

 発生している問題・エラーメッセージ

ここで、データベースに送るべきデータにコンソール等で不正な変更が行われた時にそれを検知、或いはエラーを返すことができないので
それをできるようにしたいのですがやり方の検討がてんで付きません。

 該当のソースコード

現在の状況は以下のようになっています。

          <div id="hoge_valid"></div>
          <div id="hoge">
          <input type="radio" name="hoge_a" value="2" id="D"><label for="D">D</label><br><br>
          <input type="radio" name="hoge_a" value="1" id="E"><label for="E">E</label><br><br>
          <input type="radio" name="hoge_a" value="0" id="F"><label for="F">F</label><br><br>
          </div>
<!-- ↑収集する値は文字列。 -->

    <div id="choice">
    <input type="checkbox" name="piyo" value="0" id="piyo0"><label for="piyo0">piyo0</label><br><br>
    <input type="checkbox" name="piyo" value="1" id="piyo1"><label for="piyo1">piyo1</label><br><br>
    <input type="checkbox" name="piyo" value="2" id="piyo2"><label for="piyo2">piyo2</label><br><br>
    <input type="checkbox" name="piyo" value="3" id="piyo3"><label for="piyo3">piyo3</label><br><br>
<!-- 以下同様 -->
  </div>

<!-- ↑収集する値は配列。後で文字列にします。 -->
<p>hoge:<span class="hoge_echo"></span></p>
<p>piyo:<span class="piyo_echo"></span></p>
<p><input type="button" value="check" id="is_it_OK"></p><!-- 確認画面を開くボタン -->
var $hoge="";
var $piyo="";
var $error_hoge_="";
var $hoge_echo_="";
var $error_piyo_="";
var $piyo_echo_="";
function valid_hoge($hoge)
{
  $error_hoge="";
        if ((!$hoge&&$hoge!=0)) {
        $error_hoge = "<div id=\"hoge_valid\"><p style=\"color:#ff2800;\">"+"入力されていません。"+"</p></div>";
    } else if ((parseInt($hoge)<0||parseInt($hoge)>2)&&!isNumeric($hoge)) {
        $error_hoge = "<div id=\"hoge_valid\"><p style=\"color:#ff2800;\">"+"不正なPOSTです。"+"</p></div>";
    }else{
      $error_hoge="<div id=\"hoge_valid\"></div>";
    }
    return $error_hoge;
}

function valid_hoge_echo($hoge)
{
  $hoge_array =[/*配列の中身*/];
  $hoge_echo ="";
  $error_hoge ="";
  $error_message=valid_hoge($hoge);
  if ($error_message === "<div id=\"hoge_valid\"></div>") {
    $hoge_echo = $hoge_array[parseInt($hoge)];
  }
    return $hoge_echo;
}


function valid_piyo($piyo){
  $error_piyo="";
  $piyo2 =[/*配列の中身*/];
    if ($piyo.length==0) {
        $error_piyo = "<div id=\"piyo_valid\"><p style=\"color:#ff2800;\">"+"入力されていません。"+"</p></div>";
      }else{
        for ($i = 0; $i <$piyo.length ; $i++) {
          if (((parseInt($piyo[$i])<0||parseInt($piyo[$i])>($piyo2).length-1)||!Number.isInteger(parseInt($piyo[$i]))||!Array.isArray($piyo))&&parseInt($piyo[$i])==$piyo[$i]) {
            $error_piyo = "<div id=\"piyo_valid\"><p style=\"color:#ff2800;\">"+"不正なPOSTです。"+"</p></div>";
            break;
          }
        }
        $error_piyo="<div id=\"piyo_valid\"></div>";
      }
      return $error_piyo;
}

function valid_piyo_echo($piyo)
{
  var $piyo_echo = "";
  $error_message = valid_piyo($piyo);
  $piyo2 =[/*配列の中身*/];
    var $array= new Array();
  if ($error_message==="<div id=\"piyo_valid\"></div>") {
  for(var i=0;i<$piyo.length;i++){
      if($piyo_echo!=="") $piyo_echo+=",";
      $piyo_echo+=$piyo2[parseInt($piyo[i])];
  };
  }
      return $piyo_echo;
}

/*確認画面を開かせる前にエラーメッセージが出ているかで判断していますがコンソールなどで値を変えられるとこの関数ではどうにもならないです。*/
$(function(){
        $("#piyo input").change(function(){
        ary=document.getElementsByName('piyo');
        $piyo=new Array();
        if (ary.length>1) {
          for (var i = 0; i <ary.length; i++) {
            if (ary[i].checked) {
              $piyo.push($(ary[i]).val());
            }
          }
        }
        $error_piyo_=valid_piyo($piyo);
        $piyo_echo_=valid_piyo_echo($piyo);
        $('#piyo_valid').html(valid_piyo($piyo));
      });
      $("#hoge input").change(function(){

        $hoge=$("#hoge input:checked").val();
        $('#hoge_valid').html(valid_hoge($hoge));
        $error_hoge_=valid_hoge($hoge);
        $hoge_echo_=valid_hoge_echo($hoge);
      });
  $('#is_it_OK').on('click', function() {
  $('span.hoge_echo').text($hoge_echo_);
  $('span.piyo_echo').text($piyo_echo_);
});
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+5

無理です

極端な話、フォームを全く使わず、不正な値に書き換えたAjaxリクエストを投げることすらできてしまうので、最終的なバリデーションはサーバサイドで行わなくてはなりません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.51%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16429questions

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

  • HTML

    8975questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。