こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

選択肢によって入力必須が変わるフォームの入力チェックJavaScrip

選択肢によって入力必須が変わるフォームの入力チェックJavaScript

フォームの入力チェックのJavaScriptを作成しています。

特定のラジオボタンにチェックを入れた場合のみ、
入力必須になるテキストボックスの
入力チェックJavaScriptを教えてください。

ラジオボタンが複数あるフォームで、

<input type="radio" name="type" value="type1" />
<label>タイプ1</label>
<input type="radio" name="type" value="type2" />
<label>タイプ2</label>

タイプ2を選んだ場合のみ、必須項目にしたいテキストボックスがあります。

<input type="text" name="name1" />


テキストボックスが空白だった場合にアラートを出すJavaScriptは
現在このようになっています。
(参考にしていたサイトがあるのですが、忘れてしまいました・・・。)


$(function(){
$("form1").submit(function(){
if($("input[name='name1']").val()==""){
$("input[name='name1']").css("border","1px solid #A70F00");
alert('必須項目に未入力があります');
return false;
})
})


このJavaScriptをさらに、if文で括って、
name="type" の value が type2 であれば・・・、という処理を追加すればよいのだと
思いますが、書き方が分からず困っています。
どうかよろしくお願いします。

投稿日時 - 2010-07-05 11:43:26

QNo.6016727

すぐに回答ほしいです

質問者が選んだベストアンサー

ご質問の意図がよくわかってないですが…

こんな感じ?(ライブラリは使用していません)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
<!--
function check(f) {
var i = 0, e, fe = f.elements, elm = fe["type"], res = false;
while (e = elm[i++]) if (e.value == "type2" && e.checked) res = true;
if (res && fe["name1"].value == "") {
fe["name1"].style.border = "1px solid #A70F00";
alert("必須項目に未入力があります");
} else { res = false; }
return !res;
}
//-->
</script>
</head>

<body>
<form onsubmit="return check(this)">
<input type="radio" name="type" value="type1">
<label>タイプ1</label>
<input type="radio" name="type" value="type2">
<label>タイプ2</label>
<br>
<input type="text" name="name1">
</form>
</body>
</html>

投稿日時 - 2010-07-05 12:44:15

補足

回答ありがとうございます。
はしょりすぎてしまったようです、すみません。
下記のhtmlで動きます。
今は、名前が必須項目になっていますが、
女性を選択した場合のみ必須項目にするにはどうしたらよいでしょうか?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>sample7</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("form").submit(function(){
if($("input[name='name']").val()==""){
$("input[name='name']").css("border","1px solid red").after("必須項目です").focus()
alert('必須項目が未入力です');
return false;
}
})
})
</script>
</head>
<body>
<form action="check.html" method="post">
<dl>
<dt>性別</dt>
<dd>
<input type="radio" name="gender" value="男性" />
<label>男性</label>
<input type="radio" name="gender" value="女性" />
<label>女性</label>
</dd>
<dt>お名前</dt>
<dd><input type="text" name="name" /></dd>

<input type="submit" value="送信" />
</dl>
</form>
</body>
</html>

投稿日時 - 2010-07-05 22:04:16

お礼

回答のコードでは動かず、
書いていただいたJavaScriptも理解できず、
どう利用してよいのかわかりませんでした・・・。
せっかく回答いただいたのに、すみません。

友人に助けてもらいながら自分ながらのコードでなんとかなりそうです。
ありがとうございました。

また、選択したラジオボタンによって
入力チェックするテキストボックスが変わるJavaScriptを
下記に記載しておきます。
他の方の参考になればと思います。

---------------------------------

function check(){

var flag = 0;
var j;

//ラジオボタンの入力チェック

if((flag==0) && (document.form1.contact.length)) { // 選択肢が複数ある場合
 flag = 1;
 var i;
  for(i = 0; i < document.form1.contact.length; i ++){
   if(document.form1.contact[i].checked){
j = i;// j=0なら電話 1ならメール
flag = 0; break;
}
}
}

// 設定開始(必須にする項目を設定してください)


if(j==0){//連絡方法が電話の場合
if(document.form1.tel_no.value == ""){ // 「電話」の入力をチェック

flag = 2;

}
}

if(j==1){//連絡方法がメールの場合
if(document.form1.mail_ad.value == ""){ // 「メール」の入力をチェック

flag = 3;

}
}


// 設定終了


if(flag == 1){

window.alert('必須項目に未入力がありました'); // 入力漏れがあれば警告ダイアログを表示
return false; // 送信を中止

}
else if(flag == 2){

window.alert('電話番号を入力してください'); // 入力漏れがあれば警告ダイアログを表示
return false; // 送信を中止

}
else if(flag == 3){

window.alert('メールアドレスを入力してください'); // 入力漏れがあれば警告ダイアログを表示
return false; // 送信を中止

}
else{

return true; // 送信を実行

}

}

投稿日時 - 2010-07-10 23:03:49

このQ&Aは役に立ちましたか?

2人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問