如果单击时字段为空，则显示工具提示
如果单击时字段为空，则显示工具提示
提问于 2018-07-26 03:20:18
我知道这类似于表单上的‘必需’，但如果可能的话，我需要它像这样工作。我已经在这里使用了修改过的代码，但它只适用于1个表单元素。我唯一能做的就是添加4次相同的进程，但是有没有更快更干净的方法呢？基本上，这可以用在多种形式上，不同的输入得到不同的信息。谢谢
JS小提琴是https://jsfiddle.net/DTcHh/79251/
HTML代码是
<label class="control-label" for="id_stock">Stock</label>
<button id="id_stock_btn" type="button" name="stock_btn">Check form</button>
<input type="number" name="stock" class="form-control" id="id_stock" required="" data-original-title="" title="">
<input type="number2" name="stock" class="form-control" id="id_stock" required="" data-original-title="" title="">
<input type="number3" name="stock" class="form-control" id="id_stock" required="" data-original-title="" title="">
<input type="number4" name="stock" class="form-control" id="id_stock" required="" data-original-title="" title="">JS是：
/* Latest compiled and minified JavaScript included as External Resource */
// Initialize tooltip on #id_stock input
$('#id_stock').tooltip({
title: "Please enter address",
trigger: "manual"
});
// Manually hide tooltip when re-clicking the input
// This can be modified to hide the tooltip whenever you see fit
$("#id_stock").click(function(e) {
$(this).tooltip("hide");
});
$("#id_stock_btn").click(function() {
/* Act on the event */
if(!$('#id_stock').val())
{
$('#id_stock').tooltip("show"); // Show tooltip
}
else {
//Do Some Other Stuff
}
});回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-26 03:40:50
首先，您不应该对多个元素使用相同的ids。它们必须是唯一的。要对多个元素处理相同的过程，请使用class或data-属性。
$('.form-control').tooltip({
trigger: "manual"
});
$("#id_stock_btn").click(function(){
$(".form-control").each(function(){
if(!$(this).val())
{
$(this).tooltip("show");
return false;
}
});
});
$(".form-control").click(function(e) {
$(this).tooltip("hide");
});body {
margin: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<label class="control-label" for="id_stock">Stock</label>
<button id="id_stock_btn" type="button" name="stock_btn">Check form</button>
<input type="number" name="stock" class="form-control" id="id_stock" required="" data-original-title="Please enter Name" title="">
<input type="number2" name="stock" class="form-control" id="id_stock" required="" data-original-title="Please enter Email" title="">
<input type="number3" name="stock" class="form-control" id="id_stock" required="" data-original-title="Please enter Phone" title="">
<input type="number4" name="stock" class="form-control" id="id_stock" required="" data-original-title="Please enter Address" title="">
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51526214
复制相关文章
相似问题
腾讯云开发者
