jquery-tagsinput-revisited插件与HTML required属性兼容问题咨询

我之前也碰到过这个插件和原生表单验证冲突的坑——本质原因是这个插件会把你原始的<input id="value">元素隐藏起来，而浏览器的原生required验证只会检查可见的表单控件，所以哪怕标签为空，浏览器也不会触发默认的必填提示。下面是几个亲测有效的解决办法：

方法1：手动监听表单提交，自定义验证逻辑 #

直接在表单提交时检查标签数量，为空就阻止提交并触发提示，既可以用原生验证样式，也能自定义提示内容：

$('form').submit(function(e) {
  // 获取当前插件中的所有标签
  var tags = $('#value').tagsinput('items');
  
  if (tags.length === 0) {
    e.preventDefault(); // 阻止表单提交
    
    // 方案A：触发原生验证提示（需要短暂显示原始input）
    var originalInput = $('#value');
    originalInput.show()
                  .get(0).setCustomValidity('请至少添加一个标签')
                  .reportValidity(); // 强制触发验证提示
    originalInput.hide(); // 验证后重新隐藏
    
    // 方案B：自定义提示（比如用弹窗或页面内提示）
    // alert('请务必添加至少一个标签哦');
    // $('.bootstrap-tagsinput').append('<span style="color:red;">* 必填</span>');
  }
});

这个方法的好处是不需要修改插件源码，逻辑简单直接，你可以根据自己的UI风格选择原生提示还是自定义提示。

方法2：让原始input与标签同步，利用原生验证 #

这个思路是让原始input的值和插件的标签保持同步，同时用CSS把原始input定位到插件UI的上方（透明不干扰操作），这样浏览器的原生验证就能正常触发，提示也会出现在正确的位置：

第一步：添加CSS样式 #

/* 把原始input定位到插件容器上方，透明且不干扰操作 */
#value {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none; /* 避免遮挡插件的点击事件 */
}

/* 给插件容器加相对定位，让input能正确定位 */
.bootstrap-tagsinput {
  position: relative;
}

第二步：初始化插件时同步标签与input值 #

$('#value').tagsinput({
  // 你的插件原有配置（比如autocomplete数据源等）
  onTagAdded: function(item) {
    syncInputValue();
  },
  onTagRemoved: function(item) {
    syncInputValue();
  }
});

// 同步标签到原始input的函数
function syncInputValue() {
  var tags = $('#value').tagsinput('items');
  $('#value').val(tags.join(',')); // 用逗号分隔标签作为input的值
}

这样当标签为空时，原始input的值也为空，浏览器的原生required验证会自动触发，而且因为input被定位在插件上方，提示框会刚好出现在插件的位置，用户体验更自然。

方法3：利用HTML5约束验证API自定义提示位置 #

如果你想保留原生验证的逻辑，但不想显示原始input，可以监听表单的invalid事件，把提示转移到插件容器附近：

// 初始化插件
$('#value').tagsinput({
  // 你的插件配置
});

// 监听表单的invalid事件
$('form').on('invalid', function(e) {
  if (e.target.id === 'value') {
    e.preventDefault(); // 阻止浏览器默认的提示（因为input是隐藏的）
    // 在插件容器下方添加自定义错误提示
    $('.bootstrap-tagsinput').after('<span class="text-danger mt-1 d-block">请至少添加一个标签</span>');
    // 3秒后自动移除提示
    setTimeout(() => {
      $('.text-danger').remove();
    }, 3000);
  }
});

这个方法适合需要完全自定义提示样式，同时不想手动写太多验证逻辑的场景。

内容的提问来源于stack exchange，提问作者Sam