CODEWITHSUNDEEP
javascriptjqueryvalidationtooltip
Grzegorz Redlicki
Grzegorz Redlicki

Reputation: 269

Javascript validation with bootstrap tooltip

I have problem with initiate bootstrap tooltip for input field when validation is return false.

More details:

I have idea to validate my form with javascript function and this is working very well but something must happen when validation is false.

I was thinking about bootstrap tooltip, simple, easy to control and now the best solution for me (if is something like this but really for validation and balloons for forms)

My code in javascript onsubmit form:

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;
}

So this function is return when submit button is clicked in my form and it is working one on two times.

When I don't have any phone number I have tooltip with 'phone number is required' text and when I wrote something there I have second text showing in tooltip.

But when I clicked second time, when tooltip is showing I have this error:

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)

Probably problem is with not properly initiate tooltip, because I don't have any tooltip annotation in my input field or with my destroy command.

But I don't have idea how to change title in tooltip and show again after second field validation.

If somebody can help me or maybe is something better to show this validation error like a balloon, I will be grateful.

Upvotes: 2

Views: 4092

Answers (1)

Grzegorz Redlicki
Grzegorz Redlicki

Reputation: 269

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

this is answer for my question, I searched it in this moment but maybe somebody has the same problem

without any destroy option and anything else, changing title of tooltip on submit

but important thing is 'data-original-title' because with 'title' this not working like I want.

Upvotes: 2

Related Questions