jQuery-Validation-Engineでバリデーションが効かない。

前提・実現したいこと

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

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4
5<head lang="ja">
6    <meta charset="UTF-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1">
8    <title>社員管理</title>
9    <link rel="stylesheet" href="css/style.css">
10    <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">
11</head>
12
13<body>
14    <main>
15        <h1 id="logo">
16            <img src="images/logo.png" alt="HOME画面"></a>
17        </h1>
18        <div>
19            <nav id="menubar">
20                <ul>
21                    <div class="t">
22                        <li id="findAll" style="cursor:pointer;">社員一覧</li>
23                    </div>
24                    <div class="t">
25                        <li id="forRegister" style="cursor:pointer;">社員登録</li>
26                    </div>
27                    <div class="t">
28                        <li id="forSearch" style="cursor:pointer;">社員検索</li>
29                    </div>
30                </ul>
31            </nav>
32        </div>
33        <div id="p1" style="margin-top: 50px"></div>
34
35        <br>
36    </main>
37</body>
38<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
39<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js"></script>
40<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-ja.js"></script>
41<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>
42<script type="text/javascript">
43    jQuery(document).ready(function() {
44        jQuery("#form-name").validationEngine();
45    });
46</script>
47
48<script>
49 '<section><br><br><h2>社員登録</h2><br>' +
50                    '<div><form id="form-name">' +
51                    '<div class="form-group"><label> 社員番号 </label><input type="text" class="form-control validate[required,minSize[6],maxSize[6]]"  placeholder="例 : 000001" id="employee_code"></div>' +
52                    '<div class="form-group"><label> 氏名 </label><input type="text" class="form-control validate[required, maxSize[100]]" placeholder="例 : 山田　太郎" id="employee_name"></div>' +
53                    '<div class="form-group"><label> ふりがな </label><input type="text" class="form-control validate[required, maxSize[100]]" placeholder="例 : やまだ　たろう" id="furigana"></div>' +
54                    '<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>' +
55                    '<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>' +
56                    '<div class="form-group"><label> 所属グループ </label><select class="form-control validate[required, minSize[4], maxSize[4]]" id="affiliation_group"><option value="">選択してください</option></select></div>' +
57                    '<div class="form-group"><label> 役職 </label><select class="form-control validate[required, minSize[4], maxSize[4]]" id="position"><option value="">選択してください</option></select></div>' +
58                    '<div style="text-align: center; margin-top: 30px;">' +
59                    '<button class="c" type="button" id="register">登録する</button>' +
60                    '</div></form></div></section>'
61</script>

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

幾つもマズい個所があるように見えます。

bootstrap.bundle.min.jsは
popper.jsを含んだbootstrap.jsなので、確実に機能バッティング起きてます。

Introduction#bundle

Bundle
Include every Bootstrap JavaScript plugin and dependency with one of our two bundles. Both bootstrap.bundle.js and bootstrap.bundle.min.js include Popper for our tooltips and popovers. For more information about what’s included in Bootstrap, please see our contents section.

Thymeleaf内でのURLリンクの仕方間違ってます。

<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>

ディレクトリ名から始まってると「相対パス」になるので、アクセスするURLによっては正しく参照できないのでは。

@{}を使います。
4.4 リンクURL

あと、Thymeleaf内にインラインでscriptを正しく認識させるためには、属性が必要だったはず。
jQueryを表す$はThymeleafでも特別な意味合いを持つので、無効化しなければなりません。

12.3 JavaScriptインライン処理

投稿2021/05/26 09:58

m.ts10806

総合スコア80861

KkkRrr99

2021/05/26 13:02

返答ありがとうございます。 bootstrap.bundle.min.jsなどは消しても大丈夫だったので消しました。それとThymeleafは、元々今とは別の形で作っていて、その消し忘れです。わかりづらく誤解させてしまい申し訳ないです。今はThymeleafは使ってないです。 validationEngineなのですが、言われたことやってみたりしたのですがうまくいかず、CDNを利用してセットアップしました。エラーはなくなり読み込めてはいるのですが、バリデーションが動作しません。

KkkRrr99

2021/05/26 13:07

<!DOCTYPE html> <html lang="ja"> <head lang="ja"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>社員管理</title> <link rel="stylesheet" th: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> <h1 id="logo"> <img src="images/logo.png" alt="HOME画面"></a> </h1> <div> <nav id="menubar"> <ul> <div class="t"> <li id="findAll" style="cursor:pointer;">社員一覧</li> </div> <div class="t"> <li id="forRegister" style="cursor:pointer;">社員登録</li> </div> <div class="t"> <li id="forSearch" style="cursor:pointer;">社員検索</li> </div> </ul> </nav> </div> <div id="p1" style="margin-top: 50px"></div> <br> </main> </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> //登録画面の表示 $("#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">' + '<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="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[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="position"><option value="">選択してください</option></select></div>' + '<div style="text-align: center; margin-top: 30px;">' + '<button class="c" type="button" id="register">登録する</button>' + '</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>

KkkRrr99

2021/05/26 13:08

何かおかしなところはありませんでしょうか？？

m.ts10806

2021/05/26 13:16

ThymeleafやめたのにThymeleafの書き方をしてますが・・・？

KkkRrr99

2021/05/26 13:33

すいません。どこのことでしょうか？？ Thymeleafの書き方をしているせいで、バリデーションがかからないってことでしょうか？？

m.ts10806

2021/05/26 13:39

KkkRrr99

2021/05/26 13:44

そこはthymeleafの記述取りましたが、バリデーションはなおらなかったです

KkkRrr99

2021/05/26 13:46

バリデーションの設定や、記述は間違ってそうでしょうか？？

m.ts10806

2021/05/26 13:55

質問本文のコードがそのままなので何とも言えません、コメントではマークダウン使えませんし、現状を「追記」してください。その後エラーどうなったとか。 Thymeleafやめた＝Springもやめた？ →パスとかアクセスURLとか不明 Thymeleaf前提の回答をしている以上、そこでThymeleafやめられると回答の方向性大幅に変わるので、ちょっと既に面倒です。申し訳ないですが。いずれにしても、エラーはThymeleaf自体が原因ではないので。

KkkRrr99

2021/05/26 14:07

いえいえ、ここまで付き合ってくれて本当にありがとうございました。なんとか頑張ってみます。

m.ts10806

2021/05/26 14:08

伝わってないかもしれませんが、投稿は編集できるので、現状を質問本文に追記してください。

KkkRrr99

2021/05/26 14:21

編集いたしました。コードは、さらに余分だと思ったところは取り除きました。 springを使っていて、Thymeleafは使っていません。

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