JavaScript テキストの文字数チェック

JavaScriptで桁数チェックを行いたいです。
空文字チェックは以前質問して解決できたのですが、桁数チェックができません。

やりたいこと：桁数チェック

javascript
1
2<!DOCTYPE HTML>
3<html lang="ja">
4  <head>
5  <%@ page language="java" contentType="text/html; charset=Windows-31J"
6	pageEncoding="Windows-31J"%>
7  <%@ page import="java.util.ArrayList"%>
8  <%@ page import="java.util.List"%>
9  </head>
10  <body>
11    <h1>ログイン</h1>
12    <span id="input_error"></span>
13	<form name = "Form1" action="/BusinessReport/LoginServlet" method="post" #nsubmit="return formcheck()"><br>
14    	<%
15			List<String> error = (ArrayList<String>) request.getAttribute("list");
16		    if(error != null){
17				for (int i = 0; i < error.size(); i++) {
18					out.print(error.get(i));
19		%>
20		<br>
21		<%
22				}
23		    }
24         %>
25
26        ID:<input type="text" name="userId" id="notice-input-1"> <br>
27        パスワード:<input type="text" name="pass" id="notice-input-2"> <br>
28
29		<button type=submit>ログイン</button>
30		</form>
31		<script type="text/javascript">
32		function formcheck(){
33    		var err = "";
34    	//必須チェック
35    		if(document.Form1.userId.value == ""){
36        		err += "js:ログインIDは必須です。<br />";
37    		}
38    		if(document.Form1.pass.value == ""){
39	        	err += "js:パスワードは必須です。<br />";
40	    	}
41
42			if(err != ""){
43        	document.getElementById('input_error').innerHTML = err;
44        	return false;
45    		}
46		//return true; //送信を実行
47		}
48			function ShowLength() {
49			if(document.Form1.userId.value<8){
50				err += "js:ログインIDの文字数が足りません。<br />";
51			}
52			document.getElementById("textlength").innerHTML = str.length + "文字";
53			}return true; //送信を実行
54
55	</script>
56  </body>
57</html>

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

回答3件

一、HTML の #nsubmit を onsubmit に直してください。
二、HTML に textlength という ID の要素が抜けているので追加してください。
三、JavaScript を次のようにしてください。

js
1function formcheck() {
2    var err = "";
3    var userId = document.Form1.userId.value;
4    document.getElementById("textlength").textContent = "";
5
6    if (userId === "") {
7        err += "js:ログインIDは必須です。<br>";
8    } else if (userId.length < 8) {
9        err += "js:ログインIDの文字数が足りません。<br />";
10        document.getElementById("textlength").textContent = userId.length + "文字";
11    }
12
13    if (document.Form1.pass.value === "") {
14        err += "js:パスワードは必須です。<br>";
15    }
16
17    if (err === "") {
18        return true;
19    } else {
20        document.getElementById("input_error").innerHTML = err;
21        return false;
22    }
23}

投稿2018/08/13 17:56

編集2018/08/13 18:19

退会済みユーザー

総合スコア0

JavaScript
1// コメントにて指摘
2function formcheck(){
3    var err = "";
4//必須チェック	// インデントがおかしい
5    if(document.Form1.userId.value == ""){
6        err += "js:ログインIDは必須です。<br />";
7    }
8    if(document.Form1.pass.value == ""){
9        err += "js:パスワードは必須です。<br />";
10    }
11
12    if(err != ""){
13    document.getElementById('input_error').innerHTML = err;	// インデントがおかしい
14    return false;	// インデントがおかしい
15    }
16//return true; //送信を実行
17}
18    function ShowLength() {	// どこからも呼ばれていない
19    if(document.Form1.userId.value<8){	// document.Form1.userId.value.length
20        err += "js:ログインIDの文字数が足りません。<br />";	// 変数errは関数formcheck内でしか使っていないのに急に出てくる。しかもその後何も使用していない。
21    }
22    document.getElementById("textlength").innerHTML = str.length + "文字";	// idがtextlengthの要素がそもそも無い。変数strが定義されていない。
23    }return true; //送信を実行	// 関数ShowLengthの外なのでページ読み込み時に意味の無いreturn true;を実行している。（もちろん送信には関係が無い）

↓

JavaScript
1function formcheck(){
2    var err = "";
3    //必須チェック
4    if ( document.Form1.userId.value === "" ) {
5        err += "js:ログインIDは必須です。<br />";
6    }
7    if ( document.Form1.pass.value === "" ) {
8        err += "js:パスワードは必須です。<br />";
9    }
10    if ( err === "" && document.Form1.userId.value.length < 8 ){
11        err += "js:ログインIDの文字数が足りません。<br />";
12    }
13
14    if ( err != "" ) {
15        document.getElementById('input_error').innerHTML = err;
16        return false;
17    }
18    return true; //送信を実行
19}
20// 文字数を表示したければ「pass」のinputイベントを監視するようなコードが必要。