jQueryでフォームの必須チェックをする
jQueryでフォームの必須チェックをします。
フォームはDEMOに表示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>サンプル</title>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- コーディング部分 -->
<script type="text/javascript">
$(function(){
$("form").submit(function(){
var chkSubmit = true;
// 名前必須チェック
if($("#name").val() == ""){
chkSubmit = false;
}
// 性別必須チェック
if($(":radio:checked").length == 0){
chkSubmit = false;
}
return chkSubmit;
});
});
</script>
<!-- コーディング部分 -->
</head>
<body>
<form>
名前(必須)<br>
<input type="text" name="name" id="name">
<br><br>
性別(必須)<br>
<input type="radio" name="sex" value"m">男性
<input type="radio" name="sex" value"f">女性
<br><br>
メールアドレス<br>
<input type="text" name="mail" id="mail" size="50">
<br><br>
<input type="submit" value="登録">
</form>
</body>
</html>
DEMOを見ればわかるとおり、名前と性別は必須です。
登録ボタンを押せば、$("form").submit~が実行されます。
そのロジックの中で$(“#id”).val()で名前を取得しています。空の場合、boolean変数にfalseを入れています。
次に性別で$(“:radio:checked”).lenght == 0ならチェックされていないことになるので、boolean変数にfalseを入れています。
formをsubmitする時にfalseが返るとsubmitされません。逆にtrueならsubmitされます。
これで必須チェックを行っています。
ただ、これでは不親切なので、必須項目が入力されていない場合は何らかのメッセージを表示するようにしてみます。
以下のように必須項目の後ろにspanタグを追加します。
<form>
名前(必須)<br>
<input type="text" name="name" id="name">
<span class="msg"></span>
名前欄が空の場合にメッセージを表示したいのですが、セレクタを使えば隣の要素にアクセスできるんです。
上記で言えば$(“input + span”)というように+で繋ぐことでspanタグにアクセスすることができます。
アクセスできるのはあくまでも後ろのspanタグになります。
spanタグ内にメッセージを表示するには、セレクタ.text(“文字列”)で動的に表示することができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>サンプル</title>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- コーディング部分 -->
<script type="text/javascript">
$(function(){
$("form").submit(function(){
var chkSubmit = true;
// 名前必須チェック
if($("#name").val() == ""){
// メッセージ表示
$("#name+span").text("名前は必須です");
chkSubmit = false;
}else{
// 空でない場合はtextを削除
$("#name+span").text("");
}
// 性別必須チェック
if($(":radio:checked").length == 0){
// メッセージ表示
$(":radio + span").text("性別は必須です");
chkSubmit = false;
}else{
// 空でない場合はtextを削除
$(":radio + span").text("");
}
return chkSubmit;
});
});
</script>
<!-- コーディング部分 -->
</head>
<body>
<form>
名前(必須)<br>
<input type="text" name="name" id="name">
<span></span>
<br><br>
性別(必須)<br>
<input type="radio" name="sex" value"m">男性
<input type="radio" name="sex" value"f">女性
<span></span>
<br><br>
メールアドレス<br>
<input type="text" name="mail" id="mail" size="50">
<br><br>
<input type="submit" value="登録">
</form>
</body>
</html>
DEMOです。
これで、十分なんですが、メッセージなんで赤色にしたいですね。
ということでidに対してaddClass(クラス名)メソッドと言うのがあります。
逆にremoveClass(クラス名)メソッドもあります。
では上記のif~elseにこのメソッドを追加します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>サンプル</title>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- コーディング部分 -->
<script type="text/javascript">
$(function(){
$("form").submit(function(){
var chkSubmit = true;
// 名前必須チェック
if($("#name").val() == ""){
// メッセージ表示
$("#name+span").text("名前は必須です");
$("#name").addClass("error");
chkSubmit = false;
}else{
// 空でない場合はtextを削除
$("#name+span").text("");
$("#name").removeClass("error");
}
// 性別必須チェック
if($(":radio:checked").length == 0){
// メッセージ表示
$(":radio + span").text("性別は必須です");
$(":radio").addClass("error");
chkSubmit = false;
}else{
// 空でない場合はtextを削除
$(":radio + span").text("");
$(":radio").removeClass("error");
}
return chkSubmit;
});
});
</script>
<style>
.error{background-color:#FFCCCC;}
.alert{color:#FF0000;font-size:small;}
</style>
<!-- コーディング部分 -->
</head>
<body>
<form>
名前(必須)<br>
<input type="text" name="name" id="name">
<span class="alert"></span>
<br><br>
性別(必須)<br>
<input type="radio" name="sex" value"m">男性
<input type="radio" name="sex" value"f">女性
<span class="alert"></span>
<br><br>
メールアドレス<br>
<input type="text" name="mail" id="mail" size="50">
<br><br>
<input type="submit" value="登録">
</form>
</body>
</html>
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80~120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント