【jQuery】フォームの入力チェック|バリデーション

javascript
この記事は約6分で読めます。
スポンサーリンク

フォームのバリデーションって作るの結構手間だよね。
チェックする項目が多いと時間かかるしプラグインを使っても良いけど、自分で作った方が修正も手軽だしなんたってカスタマイズしやすいじゃん!
だからコピペ用に作りました。ご自由にどうぞ!

デモフォーム(ボタンを押しても送信しません)

・メールアドレスは、「@」が抜けていたり、「.」が無かったりするとエラーになります。・電話番号は、全角・半角数字、ハイフン有・無なんでも対応しています。でも、10ケタ以上の数字が無いとエラーになります。(固定電話は10ケタで携帯電話は11ケタなため)・全てちゃんと入力してボタンを押すと「チェックOKです!」のアラートが出ます。




個人情報について個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト個人情報についてのテキスト

ボタン

HTML

<form>
  <h4>デモフォーム(ボタンを押しても送信しません)</h4>
  <div class="errorMsg"></div>
  <label>
    <span>お名前</span>
    <input type="text" name="name">
  </label>
  <label>
    <span>メールアドレス</span>
    <input type="text" name="email">
  </label>
  <label>
    <span>電話番号</span>
    <input type="text" name="number">
  </label>
  <label>
    <span>お問い合わせ内容</span>
    <textarea type="text" name="body" row="4"></textarea>
  </label>
  <div class="private">
    <span>個人情報について</span>
    <span>個人情報についてのテキスト</span>
  </div>
  <label>
    <input type="checkbox" name="privacy_check">
    個人情報に同意する
  </label>
  <div class="submit">ボタン</div>
</form>

jquery

$(".submit").on("click", function() {
  formCheck();
});

function formCheck() {
  // 電話番号の全角数字、全角ハイフンを半角に変換
  var number = $('input[name="number"]').val().replace(/[0-9‐-―ー]/g,function(s){
    return String.fromCharCode(s.charCodeAt(0)-0xFEE0);
  });
  // 電話番号のハイフンを削除
  number = number.replace(/-/g,'');

  if($('input[name="name"]').val() == "") {// 名前があるか
    $(".errorMsg").text("お名前を入力してください");
  } else if($('input[name="email"]').val() == "") {// メールアドレスがあるか
    $(".errorMsg").text("メールアドレスを入力してください");
  } else if(!$('input[name="email"]').val().match(/^[A-Za-z0-9.]+[\w-]+@[\w\.-]+\.\w{2,}$/)) {// メールアドレスが正しく入力されているか(abc@abc.abcになっているか)
    $(".errorMsg").text("メールアドレスを正しく入力してください");
  } else if (number.length < 10) {// 電話番号が正しく入力されているか
    $(".errorMsg").text("電話番号を正しく入力してください");
  } else if($('textarea[name="body"]').val() == "") {// テキストエリアの内容があるか
    $(".errorMsg").text("お問い合わせ内容を入力してください");
  } else if(!$('input[name="privacy_check"]').prop("checked")) {// チェックボックスにチェックが入っているか
    $(".errorMsg").text("個人情報に同意してください");
  } else {
    $(".errorMsg").text("");
    alert("チェックOKです!");
  }
}
SNSフォローボタン
エンデ・バタローをフォローする
javascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました