dポイントプレゼントキャンペーン実施中！

急いでいます！

javascript入力チェック

締切済

  • 質問者：39OK
  • 質問日時：
  • 回答数：3件

テキストボックスやラジオボタン、リストボックスが選択されているかチェックするプログラムを教えてください
下記はチェックボックスのコードです
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function butotnClick() {
if(document.f1.check1.checked || document.f1.check2.checked || document.f1.check3.checked || document.f1.check4.checked || document.f1.check5.checked || document.f1.check6.checked || document.f1.check7.checked){
document.f1.submit();
}else{
alert('曜日をチェックしてください');
}
}
</script>
</head>
<body>
<form name="f1">
<input type="checkbox" name="check1" />
<input type="checkbox" name="check2" />
<input type="checkbox" name="check3" />
<input type="checkbox" name="check4" />
<input type="checkbox" name="check5" />
<input type="checkbox" name="check6" />
<input type="checkbox" name="check7" />
<input type="button" value="設定" onclick="butotnClick()" />
</form>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3

  • 回答者： yambejp
  • 回答日時：

こういうのはsubmitを押せないようにするのがベター


<script>
const chk=()=>{
const flg=document.querySelectorAll('[type=checkbox]:checked').length==0;
document.querySelector('[type=submit]').disabled=flg;
}
document.addEventListener('change',e=>{
if(e.target.closest('[type=checkbox]')){
chk();
}
});
window.addEventListener('DOMContentLoaded', ()=>{
chk();
});
</script>
<body>
<form id="f1">
<label><input type="checkbox" name="check1">mon</label>
<label><input type="checkbox" name="check2">tue</label>
<label><input type="checkbox" name="check3">wed</label>
<label><input type="checkbox" name="check4">thu</label>
<label><input type="checkbox" name="check5">fri</label>
<label><input type="checkbox" name="check6">sat</label>
<label><input type="checkbox" name="check7">sum</label>
<input type="submit" value="設定" id="submit">
</form>
</body>
</html>
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： taka212qa
  • 回答日時：

以下のコードで動作します。

お使いください。


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="text/javascript">
window.onload = () => {
const button = document.getElementById("button1");
const form1 = document.getElementById("form1");
button.addEventListener("click", () => {
if (
form1.check1.checked ||
form1.check2.checked ||
form1.check3.checked ||
form1.check4.checked ||
form1.check5.checked ||
form1.check6.checked ||
form1.check7.checked
) {
document.f1.submit();
} else {
alert("曜日をチェックしてください");
}
});
};
</script>
</head>
<body>
<form name="f1" id="form1">
<input type="checkbox" name="check1" />
<input type="checkbox" name="check2" />
<input type="checkbox" name="check3" />
<input type="checkbox" name="check4" />
<input type="checkbox" name="check5" />
<input type="checkbox" name="check6" />
<input type="checkbox" name="check7" />
<input type="button" value="設定" id="button1" />
</form>
</body>
</html>
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： Ogre7077
  • 回答日時：

HTML 制約検証の仕組みを使いましょう


https://developer.mozilla.org/ja/docs/Web/Guide/ …

select/radio/input ならば required 属性で検証可能です
https://developer.mozilla.org/ja/docs/Web/HTML/A …
    • good
    • 1
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報