如果文本框验证失败,如何在该文本框上放置引导工具提示
How to put bootstrap tooltip on textbox if validation fails for that textbox?
如果没有值(空),我想对文本框执行验证。
如果验证失败,我想在文本框上显示工具提示。
这是我的文本框:
<input type="text" id="txtNo1" />
<input type="text" id="txtNo2" />
<input type="text" id="txtNo3" />
<input type="button" onclick="return ManipulateValue();">
function ManipulateValue() {
var isValid = true;
$('#txtNo1,#txtNo2,#txtNo3').each(function () {
if ($.trim($(this).val()) == '') {
isValid = false;
$(this).css({
"border": "1px solid red",
"background": "#FFCECE"
});
$(this).tooltip('show'); //not working
}
else {
$(this).css({
"border": "",
"background": ""
});
//$(this).tooltip('hide'); //not working
}
});
if (isValid == false) {
return false;
}
//ajax call to my controller method
return true;
}
我已经检查了引导工具提示的例子,甚至尝试过,但它不起作用。
那么,如何使用引导工具提示来验证我的文本框呢??
以下是如何使用Bootstrap&jQuery,但您也应该了解如何将验证组合在一起,因为有各种方法;这个工具提示示例取自
$("#valForm").validate({
showErrors: function(errorMap, errorList) {
// Clean up any tooltips for valid elements
$.each(this.validElements(), function(index, element) {
var $element = $(element);
$element.data("title", "") // Clear the title - there is no error associated anymore
.removeClass("error")
.tooltip("destroy");
});
// Create new tooltips for invalid elements
$.each(errorList, function(index, error) {
var $element = $(error.element);
$element.tooltip("destroy") // Destroy any pre-existing tooltip so we can repopulate with new tooltip content
.data("title", error.message)
.addClass("error")
.tooltip(); // Create a new tooltip based on the error messsage we just set in the title
});
},
submitHandler: function(form) {
alert("This is a valid form!");
}
});
$('#reset').click(function() {
var validator = $("#valForm").validate();
validator.resetForm();
});
body {
background: rgba(255, 255, 255, 0.45);
}
.wrapper {
padding-top: 75px;
}
#valForm input {
width: 100%;
height: 50px;
padding: 5px 20px;
margin-bottom: 10px;
font-size: 16px;
}
#valForm select {
width: 100%;
padding: 5px 20px;
margin-bottom: 10px;
font-size: 16px;
border: 1px solid #ccc;
height: 50px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
form#valForm {
padding: 10px;
}
#valForm .error {
border: 3px solid #b94a48 !important;
background-color: #fee !important;
}
#valForm label {
display: block;
margin-bottom: 10px;
color: #1c1c1c;
}
#valForm .form-group {
display: inline-block;
}
#valForm .btn-primary {
width: 100%;
height: 50px;
border-radius: 0px;
font-weight: 400;
font-size: 25px;
background: #70CCF4;
border-color: #fff;
margin-bottom: 15px;
}
#valForm .btn-clear {
width: 100%;
height: 50px;
border-radius: 0px;
font-weight: 400;
font-size: 25px;
background: #C91B08;
border-color: #fff;
color: #fff;
margin-bottom: 15px;
}
#valForm .tooltip > .tooltip-inner {
background-color: #f00;
}
#valForm .tooltip > .tooltip-arrow {
border-top-color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper">
<div class="container">
<form id="valForm" name="valForm">
<div class="row">
<div class="col-md-6">
<input data-msg-date="A NAME is Required." data-msg-required="The NAME field is required." data-rule-text="true" data-rule-required="true" id="textField" name="textField" type="text" value="" />
<label for="textField">A NAME is required.</label>
</div>
<div class="col-md-6">
<input data-msg-email="A Valid EMAIL is Required." data-msg-minlength="." data-msg-required="A Valid EMAIL is Required.." data-rule-email="true" data-rule-minlength="5" data-rule-required="true" id="emailField" name="emailField" type="text" value="" />
<label for="emailField">A Valid EMail is Required.</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<input data-msg-number="A NUMBER from 1-20 is Required." data-msg-range="A NUMBER from 1-20 is Required." data-rule-number="true" data-rule-range="[1,20]" id="numberField" name="numberField" type="text" value="0" />
<label for="numberField">A Number between 1 and 20 is Required.</label>
</div>
<div class="col-md-6">
<select data-msg-required="One SELECTION is Required." data-rule-required="true" id="selectFIELD" name="selectFIELD">
<option value="">Select Something</option>
<option value="Yes">Option 1</option>
<option value="No">Option 2</option>
<option value="Maybe">Option 3</option>
</select>
<label for="selectFIELD">One Option is Required.</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<button type="submit" class="btn btn-primary">Validate</button>
</div>
<div class="col-md-6">
<input class="btn btn-clear" type="reset" id="reset" onClick="CommentForm.reset();" value="Clear Form" readonly>
</div>
</div>
</form>
</div>
</div>
首先,您应该包含Bootstrap Tooltip插件来调用Tooltip()。
有一个可用于引导的直接插件,请尝试使用此引导验证工具提示。
相关文章:
- 使用CSS/JavaScript更改剑道图工具提示文本颜色
- Highcharts工具提示不显示corrosconding文本值,而是显示'未定义'
- 如何在Google Geochart图表的工具提示文本中添加新行
- ExtJ将工具提示添加到网格单元格文本中
- 数组中的工具提示/悬停文本
- 使用 jQuery 设置工具提示文本
- 如果文本在高图表中较多,则工具提示无法正常工作
- 在当前工具提示文本 JQuery 旁边追加或添加新文本
- 丰富的面孔 :如何在输入数字滑块工具提示的值旁边添加静态文本
- 如何将文本框弹出窗口(Jquery 工具提示或类似工具)添加到画布中的 Fabric JS 图像
- 是否可以创建当鼠标悬停在
标记内的文本上时出现的工具提示
- 在页面加载时自动对焦 dx文本框 并将 dx工具提示显示为验证消息
- 使用引导将斜体文本转换为工具提示
- 截断文本-鼠标悬停时在工具提示中显示全文
- q提示为每个更改特定工具提示的文本
- 如何更改拖动'n在ExtJs中放置工具提示文本
- 使用highlighter.js配置文本区域工具提示
- 平板电脑友好的悬停工具提示,显示基于javascript函数结果的动态文本
- 如何使用Javascript动态更改工具提示的文本
- Chartjs扩展甜甜圈与文本工具提示问题