How to list validation error messages in unordered list html
Asked on June 29, 2020
Hi All,
I am using uaa war in tomcat. In reset password page, I want to dispaly the error messages in <li>. My code is as follows:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="layouts/main">
<head>
<title>EHS Watch Reset Password</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<style>
.input-container {
display: -ms-flexbox;
/* IE10 */
display: flex;
width: 100%;
}
</style>
</head>
<div class="island" layout:fragment="page-content">
<h1>Enter New Password</h1>
<div class="island-content">
<div th:text="|Email: ${email}|" class="email-display">Email: user@example.com</div>
<form th:action="@{/reset_password.do}" method="post" novalidate="novalidate">
<input type="hidden" name="code" th:value="${code}"/>
<input type="hidden" name="email" th:value="${email}"/>
<!--<div th:if="${message_code}" th:text="#{'reset_password.' + ${message_code}}" class="error-message"></div>-->
<!--<ul th:if="${message_code}"><li th:text="#{'reset_password.' + ${message_code}}" class="error-message"></li></ul>-->
<!-- <div th:if="${message}" th:text="${message}" class="error-message"></div>-->
<div class="input-container">
<input id="password" name="password" type="password" placeholder="New Password" autocomplete="off" class="form-control" style="display: block;
margin-bottom: 21px;font-size: 15px;
height: 40px;
line-height: 1;" />
<span toggle="#password-field" class="fa fa-fw fa-eye field_icon toggle-password" style="line-height:2.2;height: 40px;margin-left:-24px;font-size: large;color: #555555;">
</span>
</div>
<div class="input-container">
<input id="password_confirmation" name="password_confirmation" type="password" placeholder="Confirm New Password" autocomplete="off" class="form-control" style="display: block;
margin-bottom: 21px;font-size: 15px;
height: 40px;
line-height: 1;" />
<span toggle="#password-field" class="fa fa-fw fa-eye field_icon toggle-confirm-password" style="line-height:2.2;height: 40px;margin-left:-24px;font-size: large;color: #555555;">
</span>
</div>
<div th:if="${message_code}" th:text="#{'reset_password.' + ${message_code}}" style="color:red;font-size:13px"></div>
<!--<ul th:if="${message_code}"><li th:text="#{'reset_password.' + ${message_code}}" class="error-message"></li></ul>-->
<!--<ul th:if="${message}"><li th:text="${message}" style="color:red;font-size:13px"></li></ul>-->
<div th:if="${message}" th:text="${message}" class="error-message"></div>
<ul id="myUl"></ul>
<script>
var res = ${message}.split(".");
console.log(res);
// document.getElementById("demo").innerHTML = res;
res.forEach(function(item) {
var li = document.createElement("li");
var text = document.createTextNode(item);
li.appendChild(text);
document.getElementById("myUl").appendChild(li);
});
}
</script>
<ul id="myUl"></ul>
<input type="submit" value="Reset Password" class="island-button" style="background:#005b86"/>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<script>
$(document).on('click', '.toggle-password', function() {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $("#password");
input.attr('type') === 'password' ? input.attr('type','text') : input.attr('type','password')
});
</script>
<script>
$(document).on('click', '.toggle-confirm-password', function() {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $("#password_confirmation");
input.attr('type') === 'password' ? input.attr('type','text') : input.attr('type','password')
});
</script>
</div>
</div>
</html>
How to achieve this? Can anyone please provide solution in solving this issue?
