javascript - 在 bootbox 回调中将 border 和 boxShadow 颜色改回正常

Question

我有一个 View 输入字段。只需要填写第一个输入栏，其他的可以留空。当用户将第一个输入字段保持为空并按下提交按钮时，boxShadow-color 和 bordercolor 将为红色。我想要的是，当用户再次按下输入字段时，边框颜色和 boxShadow 颜色会恢复到它们所在的位置。 (表单控件类其焦点颜色，浅蓝色)。

这是我的一些代码。在 if 语句中，当输入字段为空时，我将颜色更改为红色。我试着像这样创建一个新的 if 语句:if (input field focus = true) then back to normal.也用 onclick 尝试过，但问题是它只在按下提交按钮时触发。我需要手势之类的东西。那一直看着它。

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

您可以将您的错误样式基于 css 类名，即。 无效

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

然后像这样使用它:

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

并监听指定的事件类型，移除类:

如果输入焦点刚刚好:

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

或者在输入不再为空时删除错误:

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

尝试使用blur 事件