Halu_wimps
@Halu_wimps (シガラキ)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

jQueryのページ移動/問い合わせフォーム/質問

解決したいこと

jQueryを使って問い合わせフォームを作成しています。
エラーの判定や表示はできたのですが、
ボタンを押したとき入力ページにエラーがあったら同じページ、なければ確認ページに移動。
という動きにしたいのですがネットで調べてみてもいまいちうまくいかないため
ご指摘・アドバイスを頂けたら幸いです。

入力ページ

<main>
  <div class="t_box">
   <div class="info_box">
      <div class="t_title">お問い合わせ</div>

      <div class="t_info">

        <p id="info_title">下記の項目をご記入の上送信ボタンを押してください</p>
        <p id="info_text">
          送信頂いた件につきましては、当社より折り返しご連絡を差し上げます。<br>
          なお、ご連絡までに、お時間を頂く場合もございますので予めご了承ください<br>
          <span>*</span>は必須項目となります。
        </p>

      </div>

    <form class="t_form" method="post" action=" ./toi_check.php" style="font-size:17px;">

      <p id="t_i_item">氏名<span>*</span></p>
      <p for="name" class="name-validation validation"></p>
      <input class="name" id="t_i_input" type="text" name="name" placeholder="山田太郎" style="font-size:17px;">

      <p id="t_i_item">フリガナ<span>*</span></p>
      <p for="kana" class="kana-validation validation"></p>
      <input class="kana" id="t_i_input" type="text" name="kana" placeholder="ヤマダタロウ" style="font-size:17px;">

      <p id="t_i_item">電話番号</p>
      <p for="tel" class="tel-validation validation"></p>
      <input class="tel" id="t_i_input" type="tel" name="tel" placeholder="09012345678" style="font-size:17px;">

      <p id="t_i_item">メールアドレス<span>*</span></p>
      <p for="email" class="email-validation validation"></p>
      <input class="email" id="t_i_input" type="email" name="email" placeholder="test@test.co.jp" style="font-size:17px;">


      <div id="info_title">お問い合わせ内容をご記入ください<span>*</span></div>
      <p for="content" class="content-validation validation"></p>
      <textarea class="content" id="textarea" name="content" style="font-size:17px;"></textarea>

     <button class="button" id="info_button" type="submit" name="button">送信</button>

    </form>

   </div>
  </div>
</main>

jQuery

$(function(){

  $(".button").click(function () {
    var name = $(".name").val();
    var kana = $(".kana").val();
    var tel = $(".tel").val();
    var email = $(".email").val();
    var content = $(".content").val();
    var alertMessage = "";

    validateName(name);
    validateKana(kana);
    validateTel(tel);
    validateEmail(email);
    validateContent(content);

    if ($(".name-validation").text() != "") {
      alertMessage += $(".name-validation").text();
    }
    if ($(".kana-validation").text() != "") {
      alertMessage += $(".kana-validation").text();
    }
    if ($(".tel-validation").text() != "") {
      alertMessage += $(".tel-validation").text();
    }
    if ($(".email-validation").text() != "") {
      alertMessage += $(".email-validation").text();
    }
    if ($(".message-validation").text() != "") {
      alertMessage += $(".message-validation").text();
    }

    if (alertMessage != "") {
      alert(alertMessage);
    } else {
      $(".t_form").submit();
    }
  });

  function isValidName(name) {
    if (name) {
      var length = name.length <= 10;
      var reg = new RegExp(/^[^\x20-\x7e]+$/);
      var res = reg.test(name);
      return length && res;
    } else {
      return false;
    }
  }

  function isValidKana(kana) {
    if (kana) {
      var length = kana.length <= 10;
      var reg = new RegExp(/^[ァ-ンヴーァ-ン゙゚\-]+$/);
      var res = reg.test(kana);
      return length && res;
    } else {
      return false;
    }
  }

  function isValidTel(tel) {
    if (tel) {
      var reg = new RegExp(/^[0-9]+$/);
      var res = reg.test(tel);
      return res;
    } else {
      return true;
    }
  }

  function isValidEmail(email) {
    if (email) {
      var reg =
        /^[a-zA-Z0-9_.+-]+@([a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]*\.)+[a-zA-Z]{2,}$/;
      var res = reg.test(email);
      return res;
    } else {
      return false;
    }
  }

  function isValidContent(content) {
    if (content) {
      return true;
    } else {
      return false;
    }
  }

  function validateName(name) {
    if (!isValidName(name)) {
      var string = "氏名は必須入力です。10文字以内で入力してください。\n";
      $(".name-validation").text(string);
    } else {
      $(".name-validation").text("");
    }
  }

  function validateKana(kana) {
    if (!isValidKana(kana)) {
      var string = "フリガナは必須入力です。10文字以内で入力してください。\n";
      $(".kana-validation").text(string);
    } else {
      $(".kana-validation").text("");
    }
  }

  function validateTel(tel) {
    if (!isValidTel(tel)) {
      var string = "電話番号は0~9の数字で入力してください。\n";
      $(".tel-validation").text(string);
    } else {
      $(".tel-validation").text("");
    }
  }

  function validateEmail(email) {
    if (!isValidEmail(email)) {
      var string = "メールアドレスは正しく入力してください。\n";
      $(".email-validation").text(string);
    } else {
      $(".email-validation").text("");
    }
  }

  function validateContent(content) {
    if (!isValidContent(content)) {
      var string = "お問い合せ内容は必須入力です。\n";
      $(".content-validation").text(string);
    } else {
      $(".content-validation").text("");
    }
  }


  $referer = $_SERVER['HTTP_REFERER'];
  $url = "http://localhost/04_php_form/toi_ok.php";
  if(!strstr($referer,$url)){
    header("Location: http://localhost/04_php_form/toiawase.php");
    exit;
  }


});

まだ勉強中のみでとても見づらいとは思いますが、ご指摘やアドバイスを頂けたら幸いです。
よろしくお願いします。

0

2Answer

submitボタンをクリックするとsubmitイベントが発生し、action属性で指定されたリンクに遷移します。
なので入力チェックなどの結果によって、submitイベントを続行するか中止する、というイメージになります。

古い記事ですが、参考になると思います。

あと$_SERVERはPHPのスーパーグローバル変数なので、JavaScriptでは使用できません。
(自分で作成するなどすれば別ですが)

1Like

Comments

  1. @Halu_wimps

    Questioner

    ページまで張っていただきありがとうございます!!
    blue32aさんの説明でおおまかな内容が理解できたのでまた調べたりします!!

    PHPの変数だったんですね、完全にネットの情報をかき集めて作ってたので気づきませんでした、ありがとうございます!
  2. @Halu_wimps

    Questioner

    無事解決しました!
    とても分かりやすく具体的なページまで教えていただきありがとうございます!!

余計なお世話かもしれませんが・・・

ユーザー入力の検証はクライアント側だけでなくサーバー側で行うのが必須ですが(悪意のあるユーザーは JavaScript を無効にしてクライアント側の検証をスルーできるので)、今回の話はとりあえずクライアント側だけ考えれば良いということなのでしょうか?

勉強のため自力で実装しているということでしたら失礼しました。でも、もしそうでなければフレームワークに備わった検証機能を探して使うとか、少なくともそれを参考にして実装してはいかがですか。

1Like

Comments

  1. @Halu_wimps

    Questioner

    今回は勉強で自作していたのですがJavaを無効にってことは基本的にPHP等で作るほうが好ましいのでしょうか?
  2. > Javaを無効にってことは基本的にPHP等で作るほうが好ましいのでしょうか?

    Java ではなくてあなたがこの質問で使っている JavaScript です。

    JavaScript はブラウザの設定で無効にできるので、検証はサーバー側で行うのが must です。クライアント側での検証は無効なデータを送信しないで済むようにユーザーに便宜を図るためと、無効なデータなのにサーバー側で受けて対応しなければならない無駄を避けるためです。

    PHP のタグが付いているのですが違うのですか? PHP ならいろいろフレームワークがあるようですが。laravel とかにも検証機能は組み込まれているようですけど。

    検証
    https://www.oulub.com/docs/laravel/ja-jp/validation

Your answer might help someone💌