Оповещение не появляется после первого нажатия кнопки закрытия

Question

Когда я нажимаю x для кнопки предупреждения (о неправильном вводе данных в форму), чтобы исчезнуть сообщение об ошибке. В следующий раз, когда пользователь проверяет свои данные в форме и снова ошибается, предупреждающее сообщение не отображается после закрытия кнопки x один раз. Есть идеи о том, как это исправить?

Это код сообщения предупреждения и кнопки закрытия x.

HTML

 <div
        class="alert alert-danger alert-dismissible fade show hidden"
        role="alert"
        id="lessData"
      >
        <strong>Wrong! </strong> Please fill all the required data.
        <button
          type="button"
          class="close"
          data-dismiss="alert"
          aria-label="Close"
        >
          x
        </button>
      </div>

 <form id="formRegistration">
        <div class="form-group row">
          <label for="Age" class="col-md-3 col-lg-3 col-md-3 col-form-label"
            >Age <span class="red">*</span></label
          >
          <div class="col-sm-9 col-lg-9 col-md-9">
            <input
              type="number"
              class="form-control"
              id="Age"
              placeholder="Please enter your age"
            />
          </div>
        </div>
        <div class="form-group row">
          <label for="Gender" class="col-md-3 col-lg-3 col-md-3 col-form-label"
            >Gender <span class="red">*</span>
          </label>
          <div class="col-sm-9 col-lg-9 col-md-9" style="display: inline;">
            <select id="Gender" class="form-control">
              <option>Male</option>
              <option>Female</option>
            </select>
          </div>
        </div>

        <div class="form-group row">
          <label
            for="staticEmail"
            class="col-md-3 col-lg-3 col-md-3 col-form-label"
            >Email (Username) <span class="red">*</span></label
          >
          <div class="col-sm-9 col-lg-9 col-md-9">
            <input
              type="email"
              class="form-control"
              id="Email"
              placeholder="Please enter your email"
            />
          </div>
        </div>
        <div class="form-group row">
          <label
            for="button"
            class="col-md-3 col-lg-3 col-md-3 col-form-label"
          ></label>
          <div class="col-sm-9 col-lg-9 col-md-9">
            <button type="button" class="btn btn-secondary" id="button1">
              Continue to create your secret key
            </button>
          </div>
        </div>
      </form>

JS

function checkDataUserAccount() {
const alert = document.querySelector("#lessData");
const age = document.querySelector("#Age");
const email = document.querySelector("#Email");
  const reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

  let flag = false;
  if (age.value.length === 0 || !age.value.trim()) {
    flag = true;
    age.style.borderColor = "red";
  } else {
    age.style.borderColor = "";
  }

  if (email.value.length === 0 || !email.value.trim()) {
    flag = true;
  }

  if (!email.value.match(reg)) {
    email.style.borderColor = "red";
    flag = true;
  } else {
    email.style.borderColor = "";
  }
  if (flag === true) {
    alert.classList.remove("hidden");
    return false;
  } else {
    alert.classList.add("hidden");
    return true;
  }
}

Answer 1

Это происходит потому, что предупреждение dismiss удаляет элемент box оповещения из dom, поэтому вот небольшая хитрость, которую вы можете использовать для достижения того, чего вы хотите, просто удалите dismis dismis из alert и используйте собственный код строки, чтобы скрыть его и после этого

function checkDataUserAccount() {
const alert = document.querySelector("#lessData");
const age = document.querySelector("#Age");
const email = document.querySelector("#Email");
  const reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

  let flag = false;
  if (age.value.length === 0 || !age.value.trim()) {
    flag = true;
    age.style.borderColor = "red";
  } else {
    age.style.borderColor = "";
  }

  if (email.value.length === 0 || !email.value.trim()) {
    flag = true;
  }

  if (!email.value.match(reg)) {
    email.style.borderColor = "red";
    flag = true;
  } else {
    email.style.borderColor = "";
  }
  if (flag === true) {
    alert.classList.add("show");
    return false;
  } else {
    alert.classList.remove("show");
    return true;
  }
}

$('#button1').click(function(){
	checkDataUserAccount();
});
$('.close').click(function(){
	$(this).parent('#lessData').removeClass('show');
});

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
#lessData {
  display: none;
}
#lessData.show {
  display: block;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="alert alert-danger alert-dismissible fade"
        role="alert"
        id="lessData"
      >
        <strong>Wrong! </strong> Please fill all the required data.
        <button
          type="button"
          class="close"
        >
          x
        </button>
      </div>

 <form id="formRegistration">
        <div class="form-group row">
          <label for="Age" class="col-md-3 col-lg-3 col-md-3 col-form-label"
            >Age <span class="red">*</span></label
          >
          <div class="col-sm-9 col-lg-9 col-md-9">
            <input
              type="number"
              class="form-control"
              id="Age"
              placeholder="Please enter your age"
            />
          </div>
        </div>
        <div class="form-group row">
          <label for="Gender" class="col-md-3 col-lg-3 col-md-3 col-form-label"
            >Gender <span class="red">*</span>
          </label>
          <div class="col-sm-9 col-lg-9 col-md-9" style="display: inline;">
            <select id="Gender" class="form-control">
              <option>Male</option>
              <option>Female</option>
            </select>
          </div>
        </div>

        <div class="form-group row">
          <label
            for="staticEmail"
            class="col-md-3 col-lg-3 col-md-3 col-form-label"
            >Email (Username) <span class="red">*</span></label
          >
          <div class="col-sm-9 col-lg-9 col-md-9">
            <input
              type="email"
              class="form-control"
              id="Email"
              placeholder="Please enter your email"/>
          </div>
        </div>
        <div class="form-group row">
          <label
            for="button"
            class="col-md-3 col-lg-3 col-md-3 col-form-label"
          ></label>
          <div class="col-sm-9 col-lg-9 col-md-9">
            <button type="button" class="btn btn-secondary" id="button1">
              Continue to create your secret key
            </button>
          </div>
        </div>
      </form>

весь ваш код будет работать отлично.