jQuery Tooltip Custom implementation

Question

I am working with an application that is generating HTML forms, and is including custom attributes to be used for client side validation. The error message to be used for validation, is included in the error attribute, and the expression to validate the input against, is included in the expression attribute.

I have the following javascript block,

$(document).ready(function() {

 $("input[expression]").blur(function() {
    var inputs = $(":input[expression]");
    inputs.each(function(index){ 
       var input = inputs[index]; 
       var expression = $(this).attr('expression');
       if(!$(this).val().match(expression))
       {
        var error = $(this).attr("error");
        $(this).attr("title",error);
        $(this).tooltip({ position: "center right", opacity: 0.7});
        $(this).tooltip().show();
       }
       else
       {
       }
   });
  }); 
});

What I am attempting to do is setup all the fields with an expression attribute to validate their expression value against the current value when the input box, loses focus.

This is sort of working right now, but not with the behavior I would like it to have.

Right now, the tooltip error message is popping up when I click on the input element. I do not want this, I only want it to show the error message following running through the blur() callback function.

Is there a correct way to do this?

An example of what my markup would look like is shownbelow

<input type='text' name='firstName' expression='[a-zA-Z]' error='Please Enter First Name'/>

Milimetric · Accepted Answer · 2011-04-11 18:20:51Z

1

Your event is firing for every input when you blur out of any input. Your regex was also wrong.

jQuery(document).ready(function() {

            jQuery("input[expression]").blur(function() {
                if(jQuery(this).val().search(jQuery(this).attr('expression')) == -1)
                {
                    var error = jQuery(this).attr("error");
                    jQuery(this).attr("title",error);
                    jQuery(this).tooltip({ position: "center right", opacity: 0.7});
                    jQuery(this).tooltip().show();
                }
            }); 
        });

and the regex should be something like this: ^[a-zA-Z]*$

answered Apr 11, 2011 at 18:20

Milimetric

13.5k4 gold badges49 silver badges57 bronze badges

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

Comments

Jimmy Sawczuk · Accepted Answer · 2011-04-11 18:12:21Z

0

You could use HTML5's data attributes, so that data is stored in your <input> like:

<input type='text' name='firstName' 
    data-expression='[a-zA-Z]' data-error='Please Enter First Name' />

Then you could use jQuery's .data API to handle that information when you need it.

For what it's worth though, this doesn't seem like a great way to handle validation, as that data-expression attribute could easily be changed by someone with Firebug or Chrome's web developer console and thus manipulated to get around your validation.

answered Apr 11, 2011 at 18:12

Jimmy Sawczuk

13.7k7 gold badges48 silver badges60 bronze badges

3 Comments

TheJediCowboy Over a year ago

correct, this is not the primary form of validation we are using, we have server side implementation as well, but we are generating client side forms, and offering visual cues simply to try to nurture the data coming in, not to try to stop it all together.

Milimetric Over a year ago

Agreed, but business user driven design can sometimes get funky. The right way to do validation is just using the validation plugin with whatever CSS styling you wish. You can even drive the validation rules from the server side model objects.

TheJediCowboy Over a year ago

we cannot use the valdiation plugin because we need to handle the regular expressions dynamically. I am not looking for an alternative solution to how I am doing validation, I am looking for the solution to this problem. Thank you though

Collectives™ on Stack Overflow

jQuery Tooltip Custom implementation

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related