jQuery ASP input Validation with Tooltip

Question

Currently: successfully executing input validation. The input borders are highlighted red, which is exactly what I need.

The solution was found here, but I also need to add a tooltip to any of the fields that are left blank.

I'd also like to fill each tooltip with a message explaining the user error.

function validationHelper() {
   var isValid = true;
   $('#textBox1,#textBox2,#textBox3,#textBox4').each(function () {
        if ($.trim($(this).val()) == '') {
            isValid = false;
            $(this).css({
                "border": "1px solid red",
                "background": "#FFCECE"
                //do I add tooltip property here?
            });
        }
        else {
            $(this).css({
                "border": "",
                "background": ""
            });
        }
    });
    if (isValid == false) {
        return false;
    }
    return true;
}

I'd appreciate any suggestions. Thanks in advance.

There are a multitude of solutions for adding a tooltip via javascript. You'll likely want to store the message in data attributes on the fields and then generate/show a tooltip upon invalid entries. It certainly will not go within css() as in your example. — Derek
– Derek, Commented May 5, 2015 at 14:45
okay, good to know. ill update this upon some extra work. thank you. — terbubbs
– terbubbs, Commented May 5, 2015 at 14:49

Adrian Bolonio · Accepted Answer · 2015-05-07 09:47:38Z

1

I would recommend Bootstrap javascript library for the tooltips.

You can do something like this in your HTML

<input id="textBox1" type="text" title="Error text here" data-toggle="tooltip" data-placement="top">
<input id="textBox2" type="text" title="Error text here" data-toggle="tooltip" data-placement="top">
<input id="textBox3" type="text" title="Error text here" data-toggle="tooltip" data-placement="top">
<input id="textBox4" type="text" title="Error text here" data-toggle="tooltip" data-placement="top">

Then your javascript to activate the tooltip would be (triggering manual)

$(document).ready(function(){
   $('#textBox1,#textBox2,#textBox3,#textBox4').tooltip({'trigger':'manual'});
});

And your function would be

function validationHelper() {
   var isValid = true;
   $('#textBox1,#textBox2,#textBox3,#textBox4').each(function () {
        if ($.trim($(this).val()) == '') {
            isValid = false;
            $(this).css({
                "border": "1px solid red",
                "background": "#FFCECE"
            });
            $(this).tooltip('show');
        }
        else {
            $(this).css({
                "border": "",
                "background": ""
            });
            $(this).tooltip('hide');
        }
    });
    if (isValid == false) {
        return false;
    }
    return true;
}

Read the documentation to change the position of the tooltip (top/bottom...) or any other parameter you want to add/remove.

Documentation: http://getbootstrap.com/javascript/#tooltips

Note: I didn't have time to try it in a fiddle, please try and let me know if that fixes your issue or at least helps in any way :)

edited May 7, 2015 at 9:47

answered May 7, 2015 at 9:14

Adrian Bolonio

5174 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

terbubbs Over a year ago

just curious, does it matter if each Textbox has to be an html input, or is ASP textbox okay?

Adrian Bolonio Over a year ago

You didn't mention ASP so I assumed you referred to html inputs

Adrian Bolonio Over a year ago

no problem, thanks for the clarification. Anyway, I hope my answer helps you at least for guidance of where to look

Collectives™ on Stack Overflow

jQuery ASP input Validation with Tooltip

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related