Home  >  Forum  >  HTML, CSS
Post New Query

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?


Write Answer








©2020 concretepage.com | Privacy Policy | Contact Us