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

この記事は約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です!");
  }
}
javascriptjQuery

フロントエンドエンジニアとして10年目のキャリアを積んでおり、figma、Illustrator、Photoshop、WordPress、HTML、今は亡きXHTML、CSS(scss)、JavaScript(jQuery)、PHPなど使って日々仕事をしています。

仕事で検索する手間を省くためフロントエンド技術に関するブログを書いています。

制作のご依頼やお問い合わせはこちらから連絡お願いします。

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

コメント

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