【问题标题】:Javascript validation with bootstrap tooltip使用引导工具提示进行 Javascript 验证
【发布时间】:2017-04-16 19:45:59
【问题描述】:

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

更多细节:

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

我在 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)

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

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

如果有人可以帮助我,或者更好地显示这个验证错误,我将不胜感激。

【问题讨论】:

    标签: javascript jquery validation tooltip


    【解决方案1】:
    $('#phone_number').attr('data-original-title', 'phone number is required')
                      .tooltip('fixTitle')
                      .tooltip('show');
    

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

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

    但重要的是“data-original-title”,因为“title”不能像我想要的那样工作。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-03-26
      • 1970-01-01
      相关资源
      最近更新 更多