

こんにちは。  
ショッピングサイトを作成しており、お届け先情報のエラーを表示させるにあたって、  
その中で文字数制限をかけたいのですが、例えば:電話番号は8～10文字までなど  
色々なサイトを参考し見ましたが、??となり少し理解ができません。  
以下のHTML内に記述したいです。  
どのような方法で記述すればよいでしょうか。ご教示いただけますと幸いです。

[code]

    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <meta charset="UTF-8" />
    <title>エラー表示</title>
    <link rel="stylesheet" type="text/css" href="/style.css">
    </head>
    <body>
    <th:block th:fragment="InformationError">
        <div id="InformationError" title="入力情報エラー" class="hidden">
            <div class="error NameError">NAME</div>
            <div class="error TelNoError hidden"></div>
    　　　　<div class="error AddressError hidden"></div>
        </div>
    </th:block>
    </body>
    </html>
    
[/code]


CC BY-SA 4.0
2020-06-11T06:15:12.753
67532
2020-06-11T08:52:45.353
40566
question
html spring-boot
入力欄に文字数制限を設ける場合


入力された文字数を数えるといった機能は、Javascriptなどで書いたプログラムで実現します。

入力が"6文字以上20文字以内"という制限を満たしているかどうかをチェックする例が、[送信フォームの入力文字数をチェック](http://alphasis.info/2011/04/javascript-
form-check-length/) のページにあるので、参考にしてください。


CC BY-SA 4.0
2020-06-11T06:56:15.877
67533
2020-06-11T06:56:15.877
217
67532
answer


はじめまして。典型的には以下の方法が考えられます。  
実現方法や仕組みはご利用のツールによって変化します

  * フォーム内のinputタグにmaxlengthやpatternを指定する
  * JavaScriptでフォーム内容を読み取り入力を確認する。
  * サーバー側のプログラムで入力を確認する
  * データベース側で制限する

ですが、データベースに不正な値が入力されないように、最低限その直前にサーバー側のプログラムで必ず確認するのが妥当です。  
フロントエンドでのチェックはユーザー体験を高めるために重要ですが、これに依存すると不正な値を入力される危険性があります。


CC BY-SA 4.0
2020-06-11T07:14:32.343
67534
2020-06-11T07:14:32.343
37777
67532
answer


[javascript](/questions/tagged/javascript "'javascript' のタグが付いた質問を表示")
で文字列の長さのチェックをするのはあくまでユーザーの便宜を図る目的に限定してください。

攻撃者は [javascript](/questions/tagged/javascript "'javascript' のタグが付いた質問を表示")
を使わずに長い文字列を POST できるので [javascript](/questions/tagged/javascript "'javascript'
のタグが付いた質問を表示")
による文字数のチェックはサーバー側のセキュリティ面では役に立たないことには注意が必要です。データベースに格納できるより長い文字列を受け取った場合に「サーバー側で」処理をすることは必須です。


CC BY-SA 4.0
2020-06-11T07:20:18.417
67535
2020-06-11T07:20:18.417
8589
67532
answer


  * validation, バリデーション, 検証
  * constraint, 制約

とか呼ばれている機能になるかと思いますが、他の方の回答にもある通り、実現手段は複数あるので、現在の質問文に対して具体的な解決策は提示しづらいかなと感じます。

Spring BootとThymeleafを用いることは前提として考えて良さそうに見えますので、Spring Boot公式ガイドを紹介します。  
([GitHub](https://github.com/spring-guides/gs-validating-form-
input)からコードをチェックアウトしてそのまま動かせますので、すぐに内容は理解できずとも雰囲気は分かるかと思います。)

  * [Validating Form Input](https://spring.io/guides/gs/validating-form-input/)

こちらは、入力フォームの"Name"欄への入力を2文字以上30文字以下に制限し、この条件を満たさない場合"size must be between 2
and 30"というエラーメッセージを画面に出すような実装になっています。

実装方法について詳しい説明は[Spring Bootリファレンス](https://docs.spring.io/spring-
boot/docs/current/reference/htmlsingle/)や[Spring
MVCリファレンス](https://docs.spring.io/spring/docs/current/spring-framework-
reference/web.html)を"validation"で検索すると出てきます。

…が、ともあれ、質問したい内容の方向性はこういうことなのか、いやいやそうじゃなくて(例えば)フロント/JavaScriptで実現したいんだよ、なのかみたいなところを質問文に追記してもらえればもう少し具体的な回答がつきやすくなるかと思います。


CC BY-SA 4.0
2020-06-11T08:52:45.353
67539
2020-06-11T08:52:45.353
2808
67532
answer