如果该文本框的验证失败，如何将引导程序工具提示放在文本框上? [英] How to put bootstrap tooltip on textbox if validation fails for that textbox?

查看：31
本文介绍了如果该文本框的验证失败，如何将引导程序工具提示放在文本框上?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如果没有值(空)，我想对文本框执行验证.

如果验证失败，我想在文本框上显示工具提示.

这是我的文本框:

<input type="text" id="txtNo2"/><input type="text" id="txtNo3"/><input type="button" onclick="return ManipulateValue();">函数 ManipulateValue() {var isValid = true;$('#txtNo1,#txtNo2,#txtNo3').each(function () {if ($.trim($(this).val()) == '') {isValid = false;$(this).css({"border": "1px 纯红色",背景":#FFCECE"});$(this).tooltip('show');//不工作}别的 {$(this).css({边界": ""，背景": ""});//$(this).tooltip('隐藏');//不工作}});如果(isValid == false){返回假；}//ajax 调用我的控制器方法返回真；}

我已经检查了引导工具提示的示例，甚至尝试过，但它不起作用.

那么如何使用引导工具提示来验证我的文本框??

解决方案

这是一个如何使用 Bootstrap & 执行此操作的工作示例jQuery，但您也应该阅读了解如何将验证组合在一起，因为有多种方法；此工具提示示例取自 此处

$("#valForm").validate({显示错误:函数(错误映射，错误列表){//清除有效元素的任何工具提示$.each(this.validElements(), function(index, element) {var $element = $(element);$element.data("title", "")//清除标题 - 不再关联错误.removeClass("错误").tooltip("销毁");});//为无效元素创建新的工具提示$.each(errorList, function(index, error) {var $element = $(error.element);$element.tooltip("destroy")//销毁任何预先存在的工具提示，以便我们可以重新填充新的工具提示内容.data("title", error.message).addClass("错误").工具提示()；//根据我们刚刚在标题中设置的错误消息创建一个新的工具提示});},提交处理程序:函数(表单){alert("这是一个有效的表格！");}});$('#reset').click(function() {var 验证器 = $("#valForm").validate();验证器.resetForm();});

body {背景:rgba(255, 255, 255, 0.45);}.包装{填充顶部:75px；}#valForm 输入 {宽度:100%；高度:50px；填充:5px 20px；底边距:10px；字体大小:16px；}#valForm 选择 {宽度:100%；填充:5px 20px；底边距:10px；字体大小:16px；边框:1px 实心 #ccc；高度:50px；-webkit 外观:无；-moz-外观:无；外观:无；}表单#valForm {填充:10px；}#valForm .error {边框:3px 实心 #b94a48 !important;背景颜色:#fee !important;}#valForm 标签 {显示:块；底边距:10px；颜色:#1c1c1c；}#valForm .form-group {显示:内联块；}#valForm .btn-primary {宽度:100%；高度:50px；边界半径:0px；字体粗细:400；字体大小:25px；背景:#70CCF4；边框颜色:#fff;底边距:15px；}#valForm .btn-clear {宽度:100%；高度:50px；边界半径:0px；字体粗细:400；字体大小:25px；背景:#C91B08；边框颜色:#fff;颜色:#fff;底边距:15px；}#valForm .tooltip >.tooltip-内{背景色:#f00；}#valForm .tooltip >.tooltip-箭头 {边框顶部颜色:#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="容器"><form id="valForm" name="valForm"><div class="row"><div class="col-md-6"><input data-msg-date="需要一个名字."data-msg-required="NAME 字段是必需的."data-rule-text="true" data-rule-required="true" id="textField" name="textField" type="text" value=""/><label for="textField">名称是必需的.</label>

<div class="col-md-6"><input data-msg-email="需要有效的 EMAIL."数据-味精-最小长度=."data-msg-required="需要有效的 EMAIL.." data-rule-email="true" data-rule-minlength="5" data-rule-required="true" id="emailField" name="emailField" type="text" value=""/><label for="emailField">需要有效的电子邮件.</label>

<div class="row"><div class="col-md-6"><input data-msg-number="需要从 1 到 20 的数字."data-msg-range="需要从 1 到 20 的数字."data-rule-number="true" data-rule-range="[1,20]" id="numberField" name="numberField" type="text" value="0"/><label for="numberField">1 到 20 之间的数字是必需的.</label>

<div class="col-md-6"><select data-msg-required="需要一个选择."data-rule-required="true" id="selectFIELD" name="selectFIELD"><option value="">选择内容</option><option value="Yes">选项1</option><option value="No">选项2</option><option value="Maybe">选项3</option></选择><label for="selectFIELD">需要一个选项.</label>

<div class="row"><div class="col-md-6"><button type="submit" class="btn btn-primary">验证</button>

<div class="col-md-6"><input class="btn btn-clear" type="reset" id="reset" onClick="CommentForm.reset();"value="清除表单"只读>

</表单>

I want to Perform Validation on textbox if there is no value(empty).

I want to display Tooltip on textbox if validation fails.

This is my 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;
}

I have checked example of bootstrap tooltip and even tried it but it is not working.

So how to use bootstrap tooltip for validation of my textboxes??

解决方案

Here's a working example of how to do this with Bootstrap & jQuery but you should also read up how the validation can be put together because there are various methods; this Tooltip example is taken from here

$("#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>

这篇关于如果该文本框的验证失败，如何将引导程序工具提示放在文本框上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆