Change border and boxShadow color back to normal inside bootbox callback

Question

Im having a view input fields. Only the first input field is required to fill in. Others may be empty. When a user keeps the first inputfield empty and presses the submit button the boxShadow-color and bordercolor will be red. What I want is that when the user presses the inputfield again the border color and boxShadow color go back to what they where. (form-control class its focus color, light blue).

Here is some of my code. At the if statement I change color to red when input field is empty. I tried to make a new if statement like this: if (input field focus = true) then back to normal. Also tried this with onclick but the problem is it only fires when pressing the submit button. I need something like gesture or so. That keeps watching it.

ok: {
   label: "Submit",
   className: 'btn-success',
   callback: function() {
      var inputDossierTitle = document.getElementById("inputDossierTitle");
      var inputDossierSubTitle = document.getElementById("inputDossierSubTitle").value;
      var inputDossierSummary = document.getElementById("inputDossierSummary").value;
      var selectDossierPrivacySettings = document.getElementById("selectDossierPrivacySettings").value;

      const isEmpty = str => !str.trim().length;
      if (isEmpty(inputDossierTitle.value)) {
          inputDossierTitle.style.borderColor = "red";
          inputDossierTitle.style.boxShadow = "0 0 0 0.2rem rgba(255, 0, 0, 0.36)";
          return false;
      } else {
         $.ajax({
             url : '/create-dossier',
             type: "POST",
             data: {title: inputDossierTitle.value, sub_title: inputDossierSubTitle, summary: inputDossierSummary, PrivacySettings: selectDossierPrivacySettings},
             success : function () {
                 $('.filtr-container').remove();
                 new Dossier();
             }
         });
      }
   }
}

Answer 1

You could base your error styles on css class name, ie. is-invalid

(...) .is-invalid {
    border-color: red;
    box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.36);
}

then use it like this:

if (isEmpty(inputDossierTitle.value)) {
    inputDossierTitle.classList.add('is-invalid');
    return false;
}
// just a note, you dont need to have else {} here since you are returning inside of if statement

and listen for specified event type, to remove the class:

if input focus is just enough:

inputDossierTitle.addEventListener('focus', (event) => {
    inputDossierTitle.classList.remove('is-invalid');
})

or maybe remove error when input is not empty anymore:

inputDossierTitle.addEventListener('input', (event) => {
    if (event.target.value.trim().length) { // or use your isEmpty function
      inputDossierTitle.classList.remove('is-invalid');
    }
})

try to play with blur event