CODEWITHSUNDEEP
javascriptjqueryhtmlasp.net
terbubbs
terbubbs

Reputation: 1512

jQuery ASP input Validation with Tooltip

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.

Upvotes: 1

Views: 1184

Answers (1)

Adrian Bolonio
Adrian Bolonio

Reputation: 517

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 :)

Upvotes: 1

Related Questions