@ PHP

Form validation:フォーム バリデーション

jQuery を利用したフォームへの入力内容の検証です。

form_validation.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#valid_form {
  width: 100%;
  max-width: 800px;
  margin: 50px auto 0 auto;
  padding: 20px;
  border: solid 1px #ccc;
}
#valid_form div {
  font-size: 14px;
  margin-bottom: 20px;
}
#submit {
  font-weight: bold;
  width: 100px;
  padding: 5px;
  cursor: pointer;
  text-align: center;
  border: solid 3px #ccc;
  background: #eee;
}
input {
  width: 100%;
  border: solid 1px #ccc;
}
#name_alert,
#kana_alert,
#mail_alert,
#tel_alert,
#yubin_alert {
  color: red;
}
</style>
</head>

<body>
<div class="container">
  <div id="valid_form">
    <div>
      <span>名前</span>
      <input id="name" type="text">
      <br>
      <span id="name_alert"></span>
    </div>
    <div>
      <span>名前(カナ)</span>
      <input id="nameKana" type="text">
      <br>
      <span id="kana_alert"></span>
    </div>
    <div>
      <span>メールアドレス</span>
      <input id="mail" type="text">
      <br>
      <span id="mail_alert"></span>
    </div>
    <div>
      <span>電話番号</span>
      <input id="tel" type="text">
      <br>
      <span id="tel_alert"></span>
    </div>
    <div id="submit">入力チェック</div>
  <!--/#valid_form--></div>
<!--/.container--></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
  $("#submit").click(function() { // ※1.blurメソッドに入力チェック処理を関連付けています。
    var name = $("#name").val();
    $("#name_alert").text(''); // ※2エラーチェックの前に1度エラーメッセージを初期化しておきます。
    if (name == '') { // ※3以降が入力チェックになります。
      $("#name_alert").text("名前を入力して下さい。");
    }
  });
  $("#submit").click(function() {
    var nameKana = $("#nameKana").val();
    $("#kana_alert").text('');
    if (nameKana == '') {
      $("#kana_alert").text("名前(カナ)を入力して下さい。");
    } else if (!nameKana.match(/^[ァ-ン]+$/g)) {
      $("#kana_alert").text("名前(カナ)はカタカナで入力して下さい。");
    }
  });
  $("#submit").click(function() {
    var tel = $("#tel").val();
    $("#tel_alert").text('');
    if (tel == '') {
      $("#tel_alert").text("電話番号を入力して下さい。");
    } else if (!tel.match(/^\d{7,12}$/)) {
      $("#tel_alert").text("電話番号はハイフンなしの半角数字7~12字で入力して下さい。");
    }
  });
  $("#submit").click(function() {
    var mail = $("#mail").val();
    $("#mail_alert").text('');
    if (mail == '') {
      $("#mail_alert").text("メールアドレスを入力して下さい。");
    } else if (!mail.match(/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/g)) {
      $("#mail_alert").text("正しいメールアドレスを入力してください。");
    }
  });
});
</script>
</body>

</html>

demo