入力フォームに入力がない場合javascriptで処理したい

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<link rel="stylesheet" type="text/css" href="style.css">
6<title>login page</title>
7</head>
8<body>
9<div class="frameborder1">
10<h1>ログイン</h1>
11<div class="frameborder2">
12<div class="content">
13<form action="/webkensyu/Relay"  method="get" name="form1">
14<p><label>ユーザー名<input type="text" name="text1" ></label></p>
15<p><label>パスワード<input type="text" name ="text2"></label></p>
16  <div class="button">
17<input type="submit" name="button1" value="ログイン" onClick="return checkForm();"><br>
18<button type="submit" name="button2">ユーザー作成</button>
19   </div>
20</form>
21</div>
22</div>
23</div>
24<script type="text/javascript">
25function checkFrom(){
26	if(document.form1.text1.value== "" || documentform1.text2.value == ""){
27		alert("ユーザー名とパスワードを入力してください");
28		return false;
29	}else{
30		return true;
31	}	
32	}
33}
34</script>
35</body>
36</html>

１．入力フォームで入力がない場合、javascriptでアラートを出したいと思っています。
しかし、上記のコードでは上手くいきません。
解決出来なかったのでアドバイス頂けると助かります。

２．ちなみに、入力フォームに入力値がない場合、普通はどのように処理するのでしょうか？（その時や決まりによって違うと思いますが）

行動規範の内容に同意します

回答2件

ベストアンサー

普通はrequiredだけつけておけばよいでしょう

HTML
1<div class="frameborder1">
2<h1>ログイン</h1>
3<div class="frameborder2">
4<div class="content">
5<form action="/webkensyu/Relay"  method="get" name="form1">
6<p><label>ユーザー名<input type="text" name="text1" required></label></p>
7<p><label>パスワード<input type="text" name="text2" required></label></p>
8  <div class="button">
9<input type="submit" name="button1" value="ログイン" ><br>
10<button type="submit" name="button2">ユーザー作成</button>
11   </div>
12</form>
13</div>
14</div>
15</div>

requiedなしにjsで処理するならこんなかんじ

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  document.querySelector('form').addEventListener('submit',e=>{
4    var text1=e.target.querySelector('[name=text1]');
5    var text2=e.target.querySelector('[name=text2]');
6    if(text1.value== "" || text2.value == ""){
7      alert("ユーザー名とパスワードを入力してください");
8      e.preventDefault();
9    }
10  });
11});
12
13</script>
14<div class="frameborder1">
15<h1>ログイン</h1>
16<div class="frameborder2">
17<div class="content">
18<form action="/webkensyu/Relay"  method="get" name="form1">
19<p><label>ユーザー名<input type="text" name="text1"></label></p>
20<p><label>パスワード<input type="text" name="text2"></label></p>
21  <div class="button">
22<input type="submit" name="button1" value="ログイン" ><br>
23<button type="submit" name="button2">ユーザー作成</button>
24   </div>
25</form>
26</div>
27</div>
28</div>
29