使用引导工具提示进行 Javascript 验证

2024-02-10

当验证返回 false 时,我在启动输入字段的引导工具提示时遇到问题。

更多细节:

我有想法用 javascript 函数验证我的表单,这工作得很好,但是当验证错误时一定会发生一些事情。

我正在考虑引导工具提示,简单,易于控制,现在对我来说是最好的解决方案(如果是这样的东西,但确实用于验证和表单的气球)

我的代码在 javascript onsubmit 表单中:

function validateFault() {
    var phone_number = document.getElementById("phone_number").value;

    var phone_number_regex = new RegExp("^([+]?[1]?[0-9]{9,15})$");

    $('#phone_number').tooltip('destroy');
    if (!phone_number) {
        $('#phone_number').tooltip({placement: 'right', title: 'phone number is required', trigger: 'manual'}).tooltip('show');
    }
    else {
        if (!phone_number_regex.test(phone_number)) {
            $('#phone_number').tooltip({placement: 'right', title: 'allowed phone number format: +999999999 (9-15 digits with possible plus)', trigger: 'manual'}).tooltip('show');
        }
    }

    return false;
}

因此,当在我的表单中单击提交按钮时,该函数就会返回,并且它会工作一两次。

当我没有任何电话号码时,我会看到带有“需要电话号码”文本的工具提示,当我在那里写一些东西时,我会在工具提示中显示第二个文本。

但是当我第二次单击时,当工具提示显示时,出现以下错误:

Uncaught TypeError: Cannot read property 'trigger' of null
    at HTMLDivElement.q (bootstrap.min.js:6)
    at HTMLDivElement.e (jquery.min.js:3)
    at HTMLDivElement.handle (bootstrap.min.js:6)
    at HTMLDivElement.dispatch (jquery.min.js:3)
    at HTMLDivElement.q.handle (jquery.min.js:3)
    at Object.trigger (jquery.min.js:4)
    at HTMLDivElement.<anonymous> (jquery.min.js:4)
    at Function.each (jquery.min.js:2)
    at r.fn.init.each (jquery.min.js:2)
    at r.fn.init.trigger (jquery.min.js:4)

问题可能是未正确启动工具提示,因为我的输入字段或销毁命令中没有任何工具提示注释。

但我不知道如何更改工具提示中的标题并在第二次字段验证后再次显示。

如果有人可以帮助我,或者也许有更好的东西来显示此验证错误(例如气球),我将不胜感激。


$('#phone_number').attr('data-original-title', 'phone number is required')
                  .tooltip('fixTitle')
                  .tooltip('show');

这是我的问题的答案,我此刻搜索了它,但也许有人有同样的问题

没有任何销毁选项和其他任何内容,在提交时更改工具提示的标题

但重要的是“数据原始标题”,因为使用“标题”这不会像我想要的那样工作。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用引导工具提示进行 Javascript 验证 的相关文章

  • jquery 验证错误位置

    这看起来很简单 但我无法弄清楚 我正在使用 jquery 验证插件 我验证所有文件 但我想要的是在输入文本行中显示验证消息警报 例如在电子邮件输入中 请填写电子邮件地址 但现在它出现在所有字段下 在我的html中
  • Jquery从下拉列表中获取所选值的id

    我有一个下拉列表 可以从数据库获取值 如下所示 get getJobs function jobs seljobs jobs var i 0 jobs forEach function n alert job id n id 32 67 4
  • 如何仅在 NextJS 站点构建期间使用 getInitialProps?

    当使用 NextJS 构建静态站点时 我想要getInitialProps方法仅在构建步骤期间触发 而不是在客户端上触发 在构建步骤中 NextJS 运行getInitialProps 方法 https nextjs org docs fe
  • 检查 touchend 是否在拖动后出现

    我有一些代码可以更改表的类 在手机上 有时表格对于屏幕来说太宽 用户将拖动 滚动来查看内容 但是 当他们触摸并拖动表格时 每次拖动都会触发 touchend 如何测试触摸端是否是触摸拖动的结果 我尝试跟踪dragstart和dragend
  • jquery window.open 在 ajax 成功中被阻止

    尝试在我的 ajax 成功调用中打开一个新的浏览器窗口 但是 它被阻止为弹出窗口 我做了一些搜索 发现用户事件需要绑定到 window open 才能避免这种情况发生 我还找到了这个解决方案 您可以在 ajax 之前打开一个空白窗口 然后在
  • 仅一页 JavaScript 应用程序

    您是否尝试过单页 Web 应用程序 即浏览器仅从服务器 获取 一页 其余部分由客户端 JavaScript 代码处理 此类 应用程序页面 的一个很好的例子是 Gmail 对于更简单的应用程序 例如博客和 CMS 使用这种方法有哪些优点和缺点
  • 如何让 jquery Tooltipster 插件适用于新创建的 DOM 元素?

    我正在使用 Tooltipster 插件http calebjacob com tooltipster http calebjacob com tooltipster 这很棒 但我已经动态生成了插入到 DOM 中的内容 工具提示程序似乎没有
  • 如何流式传输 OpenAI 的完成 API?

    我想流式传输结果通过 OpenAI 的 API 完成 https beta openai com docs api reference completions 该文档提到使用服务器发送的事件 https developer mozilla
  • JQuery 验证在 IE8 中不起作用

    我使用 JQuery 验证脚本来验证 HTML 表单 这在 Firefox 中完美运行 但在 IE8 中不起作用 我认为冒号 或分号 有问题 但我无法抓住它 jQuery validator addMethod selectNone fun
  • Twitter 嵌入时间轴小部件

    我继续下载http platform twitter com widgets js http platform twitter com widgets js And the http platform twitter com embed t
  • 如何通过jquery更改元素的类名

    div class bestAnswerControl div class IsBestAnswer div div 我想补充一下 bestanswer some attribute 我想更换class IsBestAnswer div 到
  • 当用户单击链接时,如何记录 MixPanel 事件?

    当用户单击某种类型的链接时 我试图在 MixPanel 中记录一个事件 我正在使用 JQuery 不引人注意地完成此操作 据我所知 我需要添加一个回调函数 以便在记录事件后将用户带到 URL 这是我正在使用的代码 不幸的是
  • :jQuery / Sizzle 中的 nth-of-type()?

    让我惊讶的是Sizzle http sizzlejs com jQuery 使用的选择器引擎 带有一个内置的 nth child 选择器 但缺少 nth of type 选择器 为了说明之间的区别 nth child and nth of
  • Nodejs mysql 获取正确的时间戳格式

    我在用着mysqljs https github com mysqljs mysql得到结果后sql我变得不同TimeStamp格式如下 created at Sat Jul 16 2016 23 52 54 GMT 0430 IRDT 但
  • 如何获取 UIWebView 中元素的位置?

    我在 iPad 程序中加载了 html 的 UIWebView 通过使用 webkit column width 我将 html 分为几列 padding 0px height 1024px webkit column gap 0px we
  • 无法在前端使用 JavaScript Fetch API 将文件上传到 FastAPI 后端

    我正在尝试弄清楚如何将图像发送到我的 API 并验证生成的token那是在header的请求 到目前为止 这就是我所处的位置 app post endreProfilbilde async def endreProfilbilde requ
  • 如何在 javascript 正则表达式中匹配平衡分隔符?

    我原以为这个问题是不可能的 据我所知 Javascript 的正则表达式既没有递归插值 也没有漂亮的 NET 平衡组功能 但问题就在那里 如问题 12 所示正则表达式 alf nu http regex alf nu 匹配平衡对 lt an
  • Jquery - 通过在字符串中构建 id 的 id 获取元素

    我在使用 jquery 元素时遇到问题 我正在 var 中构造名称 例如 var myId myGotId myId attr title changed myId 返回空 我想通过 id 获取我的元素 但动态构建我的 Id 连接字符串 编
  • 如何在 gulp.src 中使用基本正则表达式?

    我正在尝试选择两个文件gulp src highcharts js and highcharts src js 当然 我知道我可以使用数组表达式显式添加这两个表达式 但出于学习目的 我尝试为它们编写一个表达式 我读过可以使用简单的正则表达式
  • 用于 C# XNA 的 Javascript(或类似)游戏脚本

    最近我准备用 XNA C 开发另一个游戏 上次我在 XNA C 中开发游戏时 遇到了必须向游戏中添加地图和可自定义数据的问题 每次我想添加新内容或更改游戏角色的某些值或其他内容时 我都必须重建整个游戏或其他内容 这可能需要相当长的时间 有没

随机推荐

  • iMessage 扩展和应用内购买

    我正在尝试使用 InApp Purchase 功能创建 iMessage 扩展 基本上我创建了一个 iMessage 应用程序 它创建了两个目标 您的应用程序目标 消息扩展 并且每个都有它自己的包标识符 扩展名有 app 前缀 现在我正在尝
  • 如何创建具有动态“zero_state”的dynamic_rnn(推理失败)

    我一直在使用 dynamic rnn 来创建模型 该模型基于 80 个时间周期信号 我想在每次运行之前将 initial state 归零 因此我设置了以下代码片段来完成此操作 state cell L1 zero state self B
  • 使用 JavaScript/jQuery 下载文件

    我有一个非常相似的指定要求here https stackoverflow com questions 1296085 download file using jquery 我需要让用户的浏览器在以下情况下手动开始下载 a someID c
  • 自定义 shebang 的 VSCode 语法高亮显示

    在工作中 我们在自定义环境下运行 python 因此我们使用非标准的 shebang 我测试过VSCode可以识别python文件without py 扩展名 如果他们有 shebang usr bin env python or usr
  • 使用 vue.js 和 vuetify 进行服务器端表单验证

    我看到了很多有关使用 Vuetify 进行客户端验证的文档 但发现很难找到有关 vuetify 和 vue 的服务器端验证消息的文档 PROBLEM 我有这个组件
  • 将数组组分组为单独的子数组组[重复]

    这个问题在这里已经有答案了 我有一个带有字符串的 JS 数组 例如 let a a a a b c c b b b d d e e e 我需要比较数组内的重复字符串 如果存在重复字符串 它将像这样分隔 a a a b c c b b b d
  • PHP 中先调用父构造函数再调用子构造函数

    我想知道是否可以在 PHP 中继承子代的 construct 之前调用父代的 construct Example class Tag construct Called first class Form extends Tag constru
  • MySQL:GROUP_CONCAT 与 LEFT JOIN

    我在使用 MySQL 的 GROUP CONCAT 函数时遇到问题 我将使用一个简单的帮助台数据库来说明我的问题 CREATE TABLE Tickets id INTEGER NOT NULL PRIMARY KEY requester
  • Python 多处理似乎不使用多个核心

    我想使用 Python 多重处理来运行预测模型的网格搜索 当我查看核心使用情况时 它似乎总是只使用一个核心 知道我做错了什么吗 import multiprocessing from sklearn import svm import it
  • 如何从Python开始计算下个月的38天

    例如 让我们考虑发票日期 09 11 2021 但是 payment period 为 38 天 那么它应该从 1 12 2021 开始到 7 01 2022 因为 12 月有 31 天 那么 due date 将是 7 01 2022 发
  • 使用nginx和gunicorn在django中通过ip限制对管理url的访问

    我试图通过在 nginx 中使用简单的基于主机的访问控制来限制对 django 应用程序管理部分的访问 不幸的是 nginx 似乎不遵守配置请求 这是我在 nginx 中这个特定部分的设置 gunicorn setup location p
  • C++:将指针变量传递给函数

    我有一个类节点 class Node public int item Node nextLink 在函数外部我声明一个 Node 指针 Node newNode 然后 我将此指针传递给函数 foo void foo Node node no
  • 如何在 Pandas 数据框中选择基于行的类别

    这确实微不足道 但不敢相信我已经闲逛了一个小时 仍然可以找到答案 所以在这里 df pd DataFrame cats a b vals 1 2 df cats df cats astype category df 我的问题是如何选择 ca
  • 读取接收和发送的网络流量字节

    在 Objective C 中获取网络流量发送和接收字节的最简单方法是什么 这并不容易 而且它来自 C 而不是 Objective C 但是您需要的所有信息都存储在返回给您的接口地址的 ifa data 字段中获取ifaddrs 3 您可以
  • Google 地图 API 密钥警报

    我的 Google 地图 API 密钥有问题 我收到一条警报说 This web site needs a different Google Maps API key 当我按 确定 收到警报时 地图正在加载并且工作正常 同样的问题已经发布
  • 如何向 Python shell 添加制表符补全?

    当使用启动 django 应用程序时python manage py shell 我得到一个 InteractiveConsole shell 我可以使用制表符完成等 Python 2 5 1 r251 54863 Apr 15 2008
  • Rails image_tag 旋转图像

    我使用亚马逊的 S3 进行图像存储 并配置了载波和雾 图像似乎存储正确 但是当我有 肖像 图像 宽度小于高度 时 它无法正确显示 而是将图像旋转到其一侧 任何正确方向的指示将不胜感激 上传者 image uploader rb class
  • C/C++ 处理程序 SIGFPE 是什么?

    好吧 我搜索了有关 SIGFPE 的文章 然后我写了一些测试 但它的行为很奇怪 那我只好在这里发帖寻求帮助了 GCC G 或 ISO C 是否明确定义了除以零会发生什么 1 我搜索了这篇文章 除以零不会抛出 SIGFPE https sta
  • 在 swift 3 中以编程方式设置 UIImageView AspectRatio 约束

    我在故事板中有一个 UIImageView 其 AspectRatio 为 1 1 在某些情况下我想在 ViewController 中以编程方式更改为 2 1 我在 ViewController 中创建该约束的引用 但无法设置该约束 您可
  • 使用引导工具提示进行 Javascript 验证

    当验证返回 false 时 我在启动输入字段的引导工具提示时遇到问题 更多细节 我有想法用 javascript 函数验证我的表单 这工作得很好 但是当验证错误时一定会发生一些事情 我正在考虑引导工具提示 简单 易于控制 现在对我来说是最好