javascript - 首次单击关闭按钮后未出现警报消息

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

标签： javascripthtmlbootstrap-4alert

Answer 1

发生这种情况是因为解除警报正在从 dom 中删除警报框元素，所以这里有一个小技巧可以用来实现您想要的，只需从警报中删除 data-dismiss 并使用自定义行代码来隐藏它，然后，

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>

您的所有代码都将完美运行。