これまでは、Spring Bootによるチェック処理を利用してきたが、今回はJavaScriptによって同等のチェック処理を実装してみたので、そのサンプルプログラムを共有する。
前提条件
下記記事の実装が完了していること。
Spring BootでのSubmit処理をJavaScriptで実施してみたこれまでは、フォームと呼ばれるブロックの値を送信するSubmit処理をFormタグのaction属性で行っていたが、今回はJavaScr...
サンプルプログラムの作成
作成したサンプルプログラムの構成は以下の通り。
なお、上記の赤枠は、前提条件のプログラムから追加／変更したプログラムである。
input.htmlの内容は以下の通りで、「確認」ボタン押下時にcheckInputAndSubmit関数を呼び出すように修正している。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | <!DOCTYPE html> <html lang="ja" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <link th:href="@{/demo.css}" rel="stylesheet" type="text/css" /> <script type="text/javascript" th:src="@{/demo.js}"></script> <title>入力画面</title> </head> <body> <p>下記必要事項を記載の上、「確認」ボタンを押下してください。</p><br/> <form th:object="${demoForm}"> <table border="0"> <tr> <td align="left" valign="top">名前：</td> <td> <input type="text" th:value="*{name}" th:field="*{name}" th:errorclass="fieldError" /> <span th:if="*{#fields.hasErrors('name')}" th:errors="*{name}" class="errorMessage"></span> </td> </tr> <tr> <td align="left" valign="top">生年月日：</td> <td> <input type="text" th:value="*{birthYear}" size="4" maxlength="4" th:field="*{birthYear}" th:errorclass="fieldError" th:classappend="${#fields.hasErrors('birthDayRequired')} ? 'fieldError'" />年 <select th:field="*{birthMonth}" th:errorclass="fieldError" th:classappend="${#fields.hasErrors('birthYear') || #fields.hasErrors('birthDayRequired')} ? 'fieldError'"> <option value="">---</option> <option th:each="item : *{getMonthItems()}" th:value="${item.key}" th:text="${item.value}"/> </select>月 <select th:field="*{birthDay}" th:errorclass="fieldError" th:classappend="${#fields.hasErrors('birthYear') || #fields.hasErrors('birthDayRequired')} ? 'fieldError'"> <option value="">---</option> <option th:each="item : *{getDayItems()}" th:value="${item.key}" th:text="${item.value}"/> </select>日 <span th:if="*{#fields.hasErrors('birthDayRequired')}" th:errors="*{birthDayRequired}" class="errorMessage"></span> <span th:if="*{#fields.hasErrors('birthYear')}" th:errors="*{birthYear}" class="errorMessage"></span> </td> </tr> <tr> <td align="left" valign="top">性別：</td> <td> <for th:each="item : *{getSexItems()}"> <input type="radio" name="sex" th:value="${item.key}" th:text="${item.value}" th:field="*{sex}" th:errorclass="fieldError" /> </for> <span th:if="*{#fields.hasErrors('sex')}" th:errors="*{sex}" class="errorMessage"></span> <span th:if="*{#fields.hasErrors('sexInvalid')}" th:errors="*{sexInvalid}" class="errorMessage"></span> </td> </tr> <tr> <td align="left" valign="top">メモ：</td> <td> <textarea rows="6" cols="40" th:value="*{memo}" th:field="*{memo}"></textarea> </td> </tr> <tr> <td align="left" valign="top">入力確認：</td> <td> <input type="checkbox" name="checked" th:value="確認済" th:field="*{checked}" th:errorclass="fieldError" /> <span th:if="*{#fields.hasErrors('checked')}" th:errors="*{checked}" class="errorMessage"></span> </td> </tr> </table> <br/><br/> <input type="button" value="確認" onclick="checkInputAndSubmit('/confirm');" /> <input type="button" value="戻る" onclick="formSubmit('/confirmBack');" /> </form> </body> </html> |
Code VillageはJavaScriptを中心としたサポート体制が充実したプログラミングスクールだったJavaScriptや、JavaScriptのフレームワーク「React」「Vue」を中心にオンラインで学習できるプログラミングスクール...
また、JavaScriptの内容は以下の通りで、checkInput関数で入力チェックを行い、エラーでない場合にサブミットする処理を実装している。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | 'use strict'; // 引数で指定されたパスでサブミットする function formSubmit(path){ if(!path){ alert('パスを指定してください'); return; } let form = document.getElementsByTagName('form')[0]; if(!form){ alert('フォームが取得できませんでした'); return; } form.action=path; form.method="post"; form.submit(); } // 入力画面の入力値のチェックを行った後で、 // 引数で指定されたパスでサブミットする function checkInputAndSubmit(path){ if(!checkInput()){ return; } formSubmit(path); } // 入力画面の入力値のチェックを行う function checkInput(){ //名前の未入力チェック let nameElem = document.getElementById('name'); if(nameElem.value === ''){ alert('名前を入力してください。'); nameElem.focus(); return false; } //名前の全角入力チェック if(!nameElem.value.match(/^[^\x01-\x7E\xA1-\xDF]+$/)){ alert('名前は全角で入力してください。') nameElem.focus(); return false; } //生年月日の未入力チェック let birthYearElem = document.getElementById('birthYear'); let birthMonthElem = document.getElementById('birthMonth'); let birthDayElem = document.getElementById('birthDay'); if(birthYearElem.value === '' && birthMonthElem.value === '' && birthDayElem.value === ''){ alert('生年月日を入力してください。'); birthYearElem.focus(); return false; } //生年月日の妥当性チェック if(!isValidDate(birthYearElem.value, birthMonthElem.value, birthDayElem.value)){ alert('生年月日が存在しない日付になっています。'); birthYearElem.focus(); return false; } //生年月日の未来日チェック if(isFutureDate(birthYearElem.value, birthMonthElem.value, birthDayElem.value)){ alert('生年月日が未来の日付になっています。'); birthYearElem.focus(); return false; } //性別の未入力チェック let sexElem = document.getElementsByName('sex'); let sexValue = ''; for (let i = 0; i < sexElem.length; i++) { if (sexElem[i].checked) { sexValue = sexElem[i].value ; break; } } if(sexValue === ''){ alert('性別を入力してください。'); sexElem[0].focus(); return false; } //確認チェックの未入力チェック let checkedElem = document.getElementsByName('checked'); if(!checkedElem[0].checked){ alert('確認チェックを入力してください。'); checkedElem[0].focus(); return false; } return true; } // 日付の妥当性チェックを行う function isValidDate(year, month, day) { let thisDate = new Date(year, month-1, day); return (thisDate.getFullYear() == year && thisDate.getMonth() == month-1 && thisDate.getDate() == day); } // 日付の未来日チェックを行う function isFutureDate(year, month, day){ let thisDate = new Date(year, month-1, day); let nowDate = new Date(); return (thisDate.getTime() > nowDate.getTime()); } |
その他のソースコード内容は、以下のサイトを参照のこと。
https://github.com/purin-it/java/tree/master/spring-boot-js-check/demo
サンプルプログラムの実行結果
サンプルプログラムの実行結果は、以下の通り。
1) Spring Bootアプリケーションを起動し、「http://(サーバー名):(ポート番号)/」とアクセスし、入力画面に遷移する。
2) 何も入力しない状態で「確認」ボタンを押下すると、「名前を入力してください。」というエラーメッセージが表示される。
3) エラーメッセージのダイアログで「OK」ボタンを押下すると「名前」にカーソルが設定される。
4) 名前に半角文字を入力すると、以下のように、「名前は全角で入力してください。」というエラーメッセージが表示される。
「AOMEI Partition Assistant Standard(無料)版」は便利なパーティション管理ツールだったハードディスクの記憶領域を論理的に分割し、分割された個々の領域のことを、パーティションといいます。 例えば、以下の図の場合、C/D...
5) 名前に全角文字を入力し、生年月日を入力せず「確認」ボタンを押下すると、「生年月日を入力してください。」というエラーメッセージが表示される。
6) 生年月日に不正な日付を入力し「確認」ボタンを押下すると、「生年月日を入力してください。」というエラーメッセージが表示される。
7) 生年月日に未来の日付を入力し「確認」ボタンを押下すると、「生年月日が未来の日付になっています。」というエラーメッセージが表示される。
「FlexClip」はテンプレートとして利用できる動画・画像・音楽などが充実した動画編集ツールだったテンプレートとして利用できるテキスト・動画・画像・音楽など(いずれも著作権フリー)が充実している動画編集ツールの一つに、「FlexCli...
8) 名前・生年月日を入力し、性別を入力せず「確認」ボタンを押下すると、「性別を入力してください。」というエラーメッセージが表示される。
9) 名前・生年月日・性別を入力し、入力確認チェックを入力せず「確認」ボタンを押下すると、「確認チェックを入力してください。」というエラーメッセージが表示される。
10) チェックエラーにならない状態で「確認」ボタンを押下すると、確認画面に遷移する。
要点まとめ
- Spring Bootによるチェック処理と同等の処理は、JavaScriptによっても実装することができる。
