jQueryでフォームの必須チェックをする

2015.05.14

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>

コメント

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