Question

我有一个标签输入它正在工作，但如果我点击提交按钮没有输入值，它应该显示一个错误消息，如必填字段

$('#form-tags-4').tagsInput({
  'autocomplete': {
    source: [
      'apple',
      'banana',
      'orange',
      'pizza'
    ]
  }
});

<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>
<link href="https://raw.githubusercontent.com/underovsky/jquery-tagsinput-revisited/master/dist/jquery.tagsinput-revisited.min.css" rel="stylesheet"/>
<script src="https://raw.githubusercontent.com/underovsky/jquery-tagsinput-revisited/master/dist/jquery.tagsinput-revisited.min.js"></script>

<label>Tags input with autocomplete:</label>
<input id="form-tags-4" name="tags-4" type="text" value="">
<button type="submit" id="save" class="btn btn-default ">SAVE</button>

以下是参考link

Answer 1

您需要编写自定义javascript进行验证。

＆＃13;

 function validateForm()
    {
     
        var a = document.getElementById("form-tags-4").value;
        if (a == "" )
        {
            alert("Please Fill The Required Field");
            return false;
        }
     
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Tags input with autocomplete:</label>
 <input id="form-tags-4" name="tags-4" type="text" value="">
<button type="submit" id="save" class="btn btn-default " onclick="return validateForm()">SAVE</button>

＆＃13;

Answer 2

您必须先在required='required'添加input。

之后，您必须在onClick事件期间检查设置的值，并根据自动完成源值确定它是对还是错。

参见示例here

Answer 3

添加表单标签并添加＆＃34; required＆＃34;输入。

<form>
   <label>Tags input with autocomplete:</label>
   <input id="form-tags-4" name="tags-4" type="text" value="" required>
   <button type="submit" id="save" class="btn btn-default ">SAVE</button>
</form>

working fiddle

Answer 4

是的，您遇到此错误是因为Chrome（或其他浏览器）无法聚焦该元素。原始文本输入被插件隐藏。

所以您会收到错误消息：

名称='tags'的无效表单控件不可聚焦。

该插件在原始字段上使用display: none;，这是我认为的错误。您可以应用此CSS以获得正确的验证消息：

.form-tags-required {
    position: absolute;
    left: 0;
    opacity: 0;
    display: block !important;
    top: 10px; // depends on your form, adapt it
}

这样，原始输入可以集中显示并接收“必需的错误”。

在未填充时验证标签输入

4 个答案: