在未填充时验证标记输入
在未填充时验证标记输入
提问于 2018-03-27 15:11:04
我有一个标记输入，它正在工作，但是，如果我单击提交按钮，没有输入值，它应该会显示一条错误消息，如required field
$('#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
回答 4
Stack Overflow用户
发布于 2019-09-01 17:57:34
是的，你有这个错误是因为Chrome (或其他浏览器)不能聚焦元素。原始文本输入被插件隐藏。
所以你会得到这个错误：
具有name='tags‘的无效表单控件不可聚焦。
插件在原始域中使用了display: none;，我认为这是一个错误。您可以应用此CSS来获得正确的验证消息：
.form-tags-required {
position: absolute;
left: 0;
opacity: 0;
display: block !important;
top: 10px; // depends on your form, adapt it
}这样，原始输入就可以被聚焦并接收到“必需的错误”。
Stack Overflow用户
发布于 2018-03-27 15:33:31
你需要编写自定义的javascript来进行验证。
function validateForm()
{
var a = document.getElementById("form-tags-4").value;
if (a == "" )
{
alert("Please Fill The Required Field");
return false;
}
}<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>
Stack Overflow用户
发布于 2018-03-29 02:09:03
添加表单标签，并在输入上添加“必需”。
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49506449
复制相关文章
相似问题
腾讯云开发者
