送信ボタンが押された後、アクションに送信する前に実行するためには↓
$(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
-------------参考書籍---------------------
→
