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

Question

When I press x to an alert button (of wrong data input to a form ) to disappear the error message. The next time when the user checks his data of the form and is wrong again the alert message doesn't show after button close x one time. Any ideas about how to fix it?

This is the code of the alert message and the button close 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

This is happening because dismiss alert is removing the alert box element from dom, so here is a little trick you can use to achieve what you want, just remove data-dismiss from alert and use a custom line code to hide it and after that,

 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>

all your code will work perfectly.