标签输入框空值提交验证：点击提交需提示必填字段错误

没问题，我来教你怎么给这个tagsInput组件加上未输入标签时的错误提示！结合你现有的代码和Bootstrap样式，我们可以这样实现：

1. 监听表单提交，添加验证逻辑 #

首先，我们需要在表单提交前检查标签是否为空。tagsInput插件提供了getTags()方法，可以直接获取当前所有标签的数组，我们通过判断数组长度来验证：

// 假设你的表单id是form-tags，记得替换成你实际的表单id
$('#form-tags').on('submit', function(e) {
  // 获取当前输入的标签数组
  const currentTags = $('#form-tags-4').tagsInput('getTags');
  
  // 先移除之前的错误提示，避免重复显示
  $('#tag-error').remove();
  
  if (currentTags.length === 0) {
    // 阻止表单提交
    e.preventDefault();
    // 用Bootstrap的样式显示错误提示
    $('#form-tags-4').after('<div id="tag-error" class="invalid-feedback d-block">必填字段</div>');
    // 给输入框添加错误状态的样式
    $('#form-tags-4').addClass('is-invalid');
  } else {
    // 如果有标签，清除错误状态
    $('#form-tags-4').removeClass('is-invalid');
  }
});

2. 优化用户体验（可选） #

为了让体验更流畅，我们可以在用户添加或移除标签时自动清除错误提示：

// 监听标签添加/移除事件
$('#form-tags-4').on('addTag removeTag', function() {
  $('#tag-error').remove();
  $('#form-tags-4').removeClass('is-invalid');
});

完整整合代码 #

把这些逻辑和你现有的代码整合后，完整代码如下：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 这里需要补充完整tagsInput的CSS和JS文件引用，你原代码里的<link href="https://r...应该是这个插件的样式文件 -->

<form id="form-tags">
  <input type="text" id="form-tags-4" class="form-control">
  <button type="submit" class="btn btn-primary mt-2">提交</button>
</form>

<script>
// 初始化tagsInput组件
$('#form-tags-4').tagsInput({ 
  'autocomplete': { 
    source: [ 'apple', 'banana', 'orange', 'pizza' ] 
  } 
});

// 表单提交验证逻辑
$('#form-tags').on('submit', function(e) {
  const currentTags = $('#form-tags-4').tagsInput('getTags');
  $('#tag-error').remove();
  
  if (currentTags.length === 0) {
    e.preventDefault();
    $('#form-tags-4').after('<div id="tag-error" class="invalid-feedback d-block">必填字段</div>');
    $('#form-tags-4').addClass('is-invalid');
  } else {
    $('#form-tags-4').removeClass('is-invalid');
  }
});

// 标签变化时清除错误状态
$('#form-tags-4').on('addTag removeTag', function() {
  $('#tag-error').remove();
  $('#form-tags-4').removeClass('is-invalid');
});
</script>

关键说明 #

• 利用tagsInput的getTags()方法获取标签数组，这是插件自带的API，比直接操作DOM更可靠。
• 用Bootstrap的is-invalid和invalid-feedback类来实现统一的错误样式，和你的现有样式保持一致。
• 添加标签变化的监听，确保用户输入标签后错误提示自动消失，不会一直停留在页面上。

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