フォームのチェック 【jQuery】

送信ボタンが押された後、アクションに送信する前に実行するためには↓

$(function(){
$("form").submit(function(){
       alert('テスト');　
       return false;　←送信キャンセル
  });});

html5のエラーメッセージをなくす
formタグに novalidate


【html】に↓

条件を示すCSS
validete required number mail

をinputタグに指定する。

条件を満たしていないものに下記エラーのCSSをつくる

error
エラーメッセージ

<input type="text" name="name" value="" id="name" class="validate required" />

★順番
チェックするimputタグにclass指定【validete】

必須項目に【required】をCSS複数指定もしくは下の二つのCSS

【number】は数字かチェック

【mail】メアドかチェック



▼テーブル▼

$(function(){
 $("#contents_form form").submit(function(){
  //エラーの初期化
  $("p.error").remove();
  $("td").removeClass("error");
  
  $("input,textarea").filter(".validate").each(function(){
   
   //必須項目のチェック
   $(this).filter(".required").each(function(){
    if($(this).val()==""){
     $(this).parent().prepend("<p class='error'>必須項目です</p>");
    }
  });
     
   //数値のチェック
   $(this).filter(".number").each(function(){
    if(isNaN($(this).val())){
     $(this).parent().prepend("<p class='error'>数値のみ入力可能です</p>");
    }
    if($(this).val()==""){
     $(this).parent().prepend("<p class='error'>必須項目です</p>");
    }

   });
   
   //メールアドレスのチェック
   $(this).filter(".mail").each(function(){
    if($(this).val() && !$(this).val().match(/.+@.+..+/g)){
     $(this).parent().prepend("<p class='error'>メールアドレスの形式が異なります</p>");
    }
   });
  
  });

//エラーの際の処理
  if($("p.error").size() > 0){
   
    $("p.error").parent().addClass("error");
 return false;
  }
  
 });
});

※必須の場合はこの部分を足せばOK
他のやり方はまた今度探す

 $("要素").filter("クラス").each(function(){
別の条件で絞込み繰り返し

その中の
$(this).filter("違うクラス")

【validete】クラス、チェックしますよ。
そんでもって【validete】の中の【required】クラスはこう処理してね。の意味



------------参考サイト----------------

jQueryでフォーム入力をチェックする

 http://www.tam-tam.co.jp/tipsnote/javascript/post3828.html

プラグインを使わずにjQueryでフォームチェック（validate） | WordPress
http://blog.web4natural.com/webprogram/72

HTML5/フォーム/form要素 妥当性のチェックを無効にする - TAG index Webサイト
http://www.tagindex.com/html5/form/form_novalidate.html


-------------参考書籍---------------------