Bootstrap 5 自定义表单验证：仅输入换行符时文本域验证误判为有效

我完全理解你遇到的这个困扰——确实，Bootstrap 5的表单验证是基于HTML5原生验证机制实现的，而原生的required属性只会检查输入框是否非空，像换行符、空格这类空白字符在原生眼里都属于“非空内容”，所以会被判定为有效，进而让Bootstrap显示绿色的验证通过标记，这对用户来说非常误导。

问题根源 #

HTML5原生验证的逻辑是：只要输入框的value属性长度大于0，就满足required的要求。换行符属于空白字符，它的长度是1，所以原生验证会认为这个输入是有效的，Bootstrap只是把原生的验证结果转换成了视觉样式，自然也就跟着“误判”了。

解决方案 #

我们需要添加自定义验证规则，判断文本域的内容是否是真正的有效内容（即去掉所有空白字符后还有实际内容），同时手动控制Bootstrap的验证状态类，而不是完全依赖原生验证的结果。

修改后的完整代码

HTML部分（调整反馈信息关联）

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<form id="test-form" class="needs-validation" novalidate>
  <div class="col-md-4">
    <div id="help-text">
      First, hit the submit form button to see the form validation stop form submission.<br><br>
      Then, click into the textarea box and hit enter.<br><br>
      Now the form validator will correctly mark the newline-only input as invalid.
    </div>

    <textarea type="textarea" class="form-control" id="textarea-input" placeholder="Enter a new line character only" required aria-describedby="validationTextareaFeedback"></textarea>
    <div id="validationTextareaFeedback" class="invalid-feedback">
      Please enter a valid value (blank lines are not allowed).
    </div>
  </div>
  <br>
  <div class="mb-3">
    <button class="btn btn-primary" type="submit">Submit form</button>
  </div>
  <div class="mb-3">
    <button id="reset-button" class="btn btn-secondary" type="button">Reset form</button>
  </div>
</form>

JavaScript部分（添加自定义验证逻辑）

// Initialize form validation
const initializeFormValidation = () => {
  "use strict";
  const forms = document.querySelectorAll(".needs-validation");
  const textarea = document.getElementById('textarea-input');

  // 实时验证：用户输入时就检查内容有效性
  textarea.addEventListener('input', function() {
    validateTextareaContent(this);
  });

  Array.prototype.slice.call(forms).forEach(function(form) {
    form.addEventListener(
      "submit",
      function(event) {
        // 执行原生验证
        const isNativeValid = form.checkValidity();
        // 执行自定义文本域验证
        const isTextareaValid = validateTextareaContent(textarea);
        // 表单整体有效 = 原生验证通过 + 文本域自定义验证通过
        const isFormValid = isNativeValid && isTextareaValid;

        if (!isFormValid) {
          event.preventDefault();
          event.stopPropagation();
        }

        form.classList.add("was-validated");
      },
      false
    );
  });
};

// 自定义文本域验证函数
const validateTextareaContent = (textarea) => {
  const hasValidContent = textarea.value.trim().length > 0;
  // 手动切换Bootstrap的验证状态类
  if (hasValidContent) {
    textarea.classList.remove('is-invalid');
    textarea.classList.add('is-valid');
  } else {
    textarea.classList.remove('is-valid');
    textarea.classList.add('is-invalid');
  }
  return hasValidContent;
};

initializeFormValidation();

// Reset form validation
$("#reset-button").on("click", () => {
  $("#test-form").removeClass("was-validated");
  $("#test-form").addClass("needs-validation");
  // 重置文本域的验证状态
  const textarea = document.getElementById('textarea-input');
  textarea.classList.remove('is-valid', 'is-invalid');
});

CSS部分（保持不变）

/* Required Fields */
.required-field::after {
  content: "*";
  color: red;
  margin-left: 2px;
}

.required-field-margin-left::after {
  content: "*";
  color: red;
  margin-left: -2px;
}

form {
  padding-left: 10px;
  padding-top: 12px;
}

#help-text {
  width: 550px;
  margin-bottom: 1rem;
}

效果说明 #

现在你再测试：

• 点击提交按钮，文本域为空时，会显示错误提示并阻止提交
• 在文本域里只输入换行符，提交时会触发错误提示，不会显示绿色验证通过标记
• 输入实际内容（哪怕前后有空白），会正常显示验证通过状态

备注：内容来源于stack exchange，提问作者Mickey Vershbow