Как проверить содержимое после обновления страницы с помощью JS?

Question

Имеется JSP страница с полем для ввода, который в режиме реального времени проверяет валидность воода данных и подсвечивает красным цветом блок пока данные, введимые в <input> не будут удовлетворять условию регулярного выражения. Это всё находится в блоке <form>. Так вот, после нажания на нопку происходит передача на backend введенной информации и, в случае какого-либо неверного поля (валидания происходит второй раз на backend), введенные данные опять передаются на страницу и страница уже имеет введенные данные. Только вот вопрос - поле, в которое было введено неверное значение (согласно регулярному выражению), после обновления уже не подсвечивает ошибку. Как это исправить?
Вот что я делал: validation.js:

window.onload = function(){
    const regexpAccountFirstName = /^\p{Lu}\p{Ll}{2,50}$/u;

    const accountFirstName = document.getElementById("account_first_name");

    const descriptionAccountFirstName = document.getElementById("description_account_first_name");

    accountFirstName.oninput = function() {
        if(regexpAccountFirstName.test(accountFirstName.value)) {
            descriptionAccountFirstName.style.color = "green";
        } else {
            descriptionAccountFirstName.style.color = "red";
        }
    };
};

Вот само регулярное выражение:

const regexpAccountFirstName = /^\p{Lu}\p{Ll}{2,50}$/u;

Подключаем на JSP страницу (лишний код опущу):

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page isELIgnored="false"%>

<fmt:setLocale value="${sessionScope.locale_page}"/>
<fmt:setBundle basename="locale"/>

<html lang="en">
<head>
    <meta charset="UTF-8">


    <script src="${pageContext.request.contextPath}/js/validation.js"></script>
    <title>
        <fmt:message key="form.signUp.title"/>
    </title>
</head>
<body>
<div id="container">
    <div id="main">
        <div id="window-title" class="row"><fmt:message key="form.signUp.message"/></div>

        <form action="controller" method="post" novalidate>
            <div class="row">
                <label class="description">
                    <fmt:message key="form.signUp.warning"/>
                </label>
            </div>

            <div class="row">
                <div class="block">
                    <div class="data">
                        <span class="icon icon-user"></span>
                        <input type="text" id="account_first_name" name="account_first_name" value="${account_first_name}" placeholder="<fmt:message key="placeholder.userFirstName"/>" onblur="validationFirstName()" onchange="validationFirstName()">
                    </div>

                    <label id="description_account_first_name" class="description"><fmt:message key="description.valid.userFirstName"/></label>
                </div>
            </div>

            <div class="row">
                <button type="submit" class="button-confirm" name="command" value="sign_up"><fmt:message key="button.label.confirm"/></button>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript" src="../../static/js/password.js"></script>
</body>
</html>

Поле до проверки (подсвечивает красным блок):

Поле после нажатия на кнопку "Confirm" и возвращения опять на данную страниу проверки (НЕ подсвечивает красным блок):

Answer 1

Вам надо вызывать вашу функцию валидации при загрузке формы. Возможно, придется поправить вашу функцию валидации для обработки пустого инпута.

window.onload = function(){
  const regexpAccountFirstName = /^\p{Lu}\p{Ll}{2,50}$/u;

  const accountFirstName = document.getElementById("account_first_name");

  const descriptionAccountFirstName = document.getElementById("description_account_first_name");

  function validateAccount() {
      if(regexpAccountFirstName.test(accountFirstName.value)) {
          descriptionAccountFirstName.style.color = "green";
      } else {
          descriptionAccountFirstName.style.color = "red";
      }
  };
  accountFirstName.oninput = validateAccount;
  validateAccount(); // здесь вызываем валидацию вручную при загрузке.
};

БЛОГ НА HUSL

Как проверить содержимое после обновления страницы с помощью JS?

Ответы (1 шт):