Bootstrap 5.2客户端表单验证失效求助：为何客户端校验未触发？

嘿，我看了你的问题和代码，发现几个可能导致客户端验证没触发的点，咱们一步步来排查解决：

• maxlength本身不触发原生验证提示
  首先得明确一个关键点：HTML5的maxlength属性是直接限制用户输入的字符数（正常情况下浏览器会直接阻止输入超过长度的内容），它不会触发原生的验证错误提示。如果你想让用户输入超过长度后收到明确的错误提示，得换用pattern属性来定义长度规则，比如限制1-50个字符：

  <input class="form-control" 
         placeholder='Ex, "Win 50% off!" or "1 in 10 win a free hat!"'
         type="text" 
         id="event[event_name]" 
         name="event[event_name]" 
         required
         pattern=".{1,50}"
         title="标题长度不能超过50个字符">
  

• 缺少长度超限的错误提示文本
  你当前的invalid-feedback只针对“必填”场景，得把长度超限的提示也加进去，这样验证失败时才会显示对应的错误内容：

  <div class="invalid-feedback">
    请填写标题，且长度不能超过50个字符
  </div>
  

• 按钮的onclick可能干扰表单提交事件
  你的提交按钮绑定了update函数，但如果这个函数没有明确返回true，可能会阻止表单的submit事件触发（而Bootstrap的验证逻辑正是监听submit事件的）。你需要修改按钮的onclick，确保返回函数的执行结果：

  <button class="btn btn-primary"
  onclick="return update(document.getElementById('eventStart').value,document.getElementById('eventEnd').value)">Next</button>
  

  同时，在update函数里，如果时间检查通过要返回true，不通过则返回false来阻止提交：

  function update(start, end) {
    const startDate = new Date(start);
    const endDate = new Date(end);
    if (endDate <= startDate) {
      document.getElementById('timeValidate').textContent = '结束时间不能早于开始时间哦';
      return false;
    } else {
      document.getElementById('timeValidate').textContent = '';
      return true;
    }
  }
  

• 额外小问题：Radio组的required属性位置错误
  你把required加在了btn-group这个div上，但div不是表单控件，原生验证根本识别不了这个属性！得把required移到radio输入元素上（只要给组里任意一个radio加就行，因为同name的radio属于同一组）：

  <input type="radio" class="btn-check" onselect="setQrName" name="event[qr_name]" value="<%= q.name %>"
  id="<%= q.name %>" autocomplete="off" required>
  

现在你再测试一下：输入超过50字符的标题后点击提交，应该会触发Bootstrap的错误提示，表单也不会直接提交到服务器啦。

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