質問編集履歴

修正

2021/05/26 14:35

投稿

KkkRrr99

スコア6

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -3,6 +3,8 @@
 Spring BootでJavaScriptのAJaxやJsonを使って、社員管理できるものを作っています。
 そこで、登録画面などにValidation-Engineを使ってバリデーションをかけているのですが、バリデーションが効きません。
+jQuery自体は動作していて、Validation-Engineも起動時エラーは出ていないので動作していると思われます。
 まだ、プログラミングは勉強したばかりで、色々調べてみたのですがわからず、どうかお力添えいただけないでしょうか。

修正

2021/05/26 14:34

投稿

KkkRrr99

スコア6

test CHANGED Viewed

	@@ -1 +1 @@
1	- jQuery-Validation-Engineが~~エラーに~~なる。
1	+ jQuery-Validation-Engineでバリデーションが効かない。

test CHANGED Viewed

@@ -2,23 +2,11 @@
 Spring BootでJavaScriptのAJaxやJsonを使って、社員管理できるものを作っています。
-そこで、登録画面などにjQuery-Validation-Engineを使ってバリデーションをかけたいのですが
+そこで、登録画面などにValidation-Engineを使ってバリデーションをかけているのですが、バリデーションが効きません。
-「localhost:8080/」で起動した瞬間、下記の画像のようなエラーになります。
 まだ、プログラミングは勉強したばかりで、色々調べてみたのですがわからず、どうかお力添えいただけないでしょうか。
-また、もしjQuery-Validation-Engineがうまく動作したときにバリデーションのかけ方があってるかもご教授お願い致します。
-### 発生している問題・エラーメッセージ
-![イメージ説明](d7957b4c9304b2abaefda9f8cd7d555d.png)
@@ -156,19 +144,9 @@
-spring bootのパッケージ内容です。
-![イメージ説明](c287192da9dde9b674cb179bf4ee2f9e.png)
-### 試したこと
-bodyの下の方に書いているのが悪いのかと思い、headの中に入れてみたのですがそれでもダメでした。
-jQueryは動いていることは確認済みです。

修正

2021/05/26 14:27

投稿

KkkRrr99

スコア6

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -30,7 +30,7 @@
 <!DOCTYPE html>
-<html lang="ja" xmlns:th="http://www.thymeleaf.org">
+<html lang="ja">
@@ -44,21 +44,15 @@
     <title>社員管理</title>
-    <link rel="stylesheet" th:href="@{/css/style.css}">
+    <link rel="stylesheet" href="css/style.css">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 </head>
 <body>
     <main>
@@ -80,15 +74,11 @@
                     </div>
                     <div class="t">
                         <li id="forRegister" style="cursor:pointer;">社員登録</li>
                     </div>
                     <div class="t">
@@ -102,8 +92,6 @@
         </div>
         <div id="p1" style="margin-top: 50px"></div>
@@ -112,79 +100,47 @@
     </main>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
-    <script src="js/jQuery-3.6.0.min.js" type="text/javascript"></script>
-    <script src="js/jquery.validationEngine.js" type="text/javascript"></script>
-    <script src="js/jquery.validationEngine-ja.js" charset="UTF-8" type="text/javascript"></script>
 </body>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-ja.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js" type="text/javascript" charset="utf-8"></script>
+<script type="text/javascript">
+    jQuery(document).ready(function() {
+        jQuery("#form-name").validationEngine();
+    });
+</script>
 <script>
+ '<section><br><br><h2>社員登録</h2><br>' +
-$(document).ready(function () {
-  $("#form-name").validationEngine();
-});
-    //登録画面の表示
-    $("#forRegister").on("click", function() {
-        $.ajax({
-                url: "/employee/forSearch",
-                type: "GET",
-                contentType: "application/json",
-            })
-            .done(function(user, textStatus, jqXHR) {
-                $("#p1").empty();
-                $("#p1").append(
-                    '<section><br><br><h2>社員登録</h2><br>' +
-                    '<div><form id="form-name" novalidate>' +
+                    '<div><form id="form-name">' +
                     '<div class="form-group"><label> 社員番号 </label><input type="text" class="form-control validate[required,minSize[6],maxSize[6]]"  placeholder="例 : 000001" id="employee_code"></div>' +
-                    '<div class="form-group"><label> 氏名 </label><input type="text" class="form-control validate[required,maxSize[100]]" placeholder="例 : 山田　太郎" id="employee_name"></div>' +
+                    '<div class="form-group"><label> 氏名 </label><input type="text" class="form-control validate[required, maxSize[100]]" placeholder="例 : 山田　太郎" id="employee_name"></div>' +
-                    '<div class="form-group"><label> ふりがな </label><input type="text" class="form-control validate[required,maxSize[100]]" placeholder="例 : やまだ　たろう" id="furigana"></div>' +
+                    '<div class="form-group"><label> ふりがな </label><input type="text" class="form-control validate[required, maxSize[100]]" placeholder="例 : やまだ　たろう" id="furigana"></div>' +
-                    '<div class="form-group"><label> メールアドレス </label><input type=text class="form-control validate[required,custom[email],maxSize[50]]" placeholder="例 : example@upload-gp.co.jp" id="mail_address"></div>' +
+                    '<div class="form-group"><label> メールアドレス </label><input type=text class="form-control validate[required, custom[email],maxSize[50]]" placeholder="例 : example@upload-gp.co.jp" id="mail_address"></div>' +
-                    '<div class="form-group"><label> 電話番号 </label><input type=text  class="form-control validate[required,custom[phone],maxSize[13]]" placeholder="例 : 000-000-000" id="tel_no"></div>' +
+                    '<div class="form-group"><label> 電話番号 </label><input type=text  class="form-control validate[required, custom[phone],maxSize[13]]" placeholder="例 : 000-000-000" id="tel_no"></div>' +
-                    '<div class="form-group"><label> 所属グループ </label><select class="form-control validate[required,minSize[4],maxSize[4]]" id="affiliation_group"><option value="">選択してください</option></select></div>' +
+                    '<div class="form-group"><label> 所属グループ </label><select class="form-control validate[required, minSize[4], maxSize[4]]" id="affiliation_group"><option value="">選択してください</option></select></div>' +
-                    '<div class="form-group"><label> 役職 </label><select class="form-control validate[required,minSize[4],maxSize[4]]" id="position"><option value="">選択してください</option></select></div>' +
+                    '<div class="form-group"><label> 役職 </label><select class="form-control validate[required, minSize[4], maxSize[4]]" id="position"><option value="">選択してください</option></select></div>' +
                     '<div style="text-align: center; margin-top: 30px;">' +
@@ -192,39 +148,7 @@
                     '</div></form></div></section>'
-                );
-                for (var j = 0; j < user[0].length; j++) {
-                    $("#affiliation_group").append($('<option>').html(user[0][j].name).val(user[0][j].value));
-                }
-                for (var j = 0; j < user[1].length; j++) {
-                    $("#position").append($('<option>').html(user[1][j].name).val(user[1][j].value));
-                }
-            })
-            .fail(function(jqXHR, textStatus, errorThrown) {
-                $("#p1").text(jqXHR.status); //例：404
-            })
-            .always(function() {});
-    });
 </script>
 ```