TipTip with form validation

Danny's Avatar

Danny

08 Dec, 2012 12:06 AM

I am trying to use form validation with Jquery so that the tipTip bubble will appear to the side of the textbox when it is invalid and stay there. I thought I would simply put it as a function within the message option, but that doesnt seem to work. The string after the name which is commented out works but not with the tipTip. Any help will be appreciated

var JQUERY4U = {};

JQUERY4U.UTIL =
{
    setupFormValidation: function()
    {
        //form validation rules
        $("#register-form").validate({
            rules: {
                name: "required",

            },
            messages: {
                name: //"Please enter your firstname",
                $("#test").tipTip(),

            },
            submitHandler: function(form) {
                form.submit();
            }
        });
    }
}
  1. 1 Posted by Tcho on 05 Feb, 2013 02:50 PM

    Tcho's Avatar

    I hope it's not to late for you, anyway it may be usefull for other people.
    I managed to use tiptip with the jquery validate plugin using the plugin's errorPlacement method :
    errorPlacement: function(error, element) {
    var id=element.attr('id');

                    $(error).tipTip({attribute: 'data-error', defaultPosition:'right', content: function (e) {$(this).tipTip({
    

    // to dynamically update the tip message if there are many validation rules content:$(this).attr('data-error');});
    }}).insertAfter(element); }

    For my purpose i use a data-error attribute which contains the error message.
    For that, i have overriden the jquery validate showLabel method :

    $.extend($.validator.prototype,{ showLabel: function(element, message) { var label = this.errorsFor( element ); if ( label.length ) { // refresh error/success class label.removeClass( this.settings.validClass ).addClass( this.settings.errorClass );

            // check if we have a generated label, replace the message then
            if ( label.attr("generated") ) {
                label.attr('data-error', message);
            }
        } else {
            // create label
            label = $("<" + this.settings.errorElement + "/>")
                .attr({"for":  this.idOrName(element), generated: true})
                .addClass(this.settings.errorClass)
                .attr('data-error', message || "");
            if ( this.settings.wrapper ) {
                // make sure the element is visible, even in IE
                // actually showing the wrapped element is handled elsewhere
                label = label.hide().show().wrap("<" + this.settings.wrapper + "/>").parent();
            }
            if ( !this.labelContainer.append(label).length ) {
                if ( this.settings.errorPlacement ) {
                    this.settings.errorPlacement(label, $(element) );
                } else {
                label.insertAfter(element);
                }
            }
        }
        if ( !message && this.settings.success ) {
            label.text("");
            if ( typeof this.settings.success === "string" ) {
                label.addClass( this.settings.success );
            } else {
                this.settings.success( label, element );
            }
        }
        this.toShow = this.toShow.add(label);
    }
    

    });

  2. 2 Posted by Tcho on 05 Feb, 2013 02:57 PM

    Tcho's Avatar

    Update : the code I copied for the error placement is not the good one :)

    Here is the good one
    // errorPlacement: function(error, element) {

    $(error).tipTip({attribute: 'data-error', defaultPosition:'right', content: function (e) { return $(this).attr('data-error'); }}).insertAfter(element);

                   }
    
  3. 3 Posted by Small Monster on 03 Jan, 2014 09:41 AM

    Small Monster's Avatar

    It looks that jQuery has a big difference with C# on the form validation, because I just fiddled with a Form control in C# from a Form&Dialog components several weeks ago.

  4. 4 Posted by gzQpzglgBZ on 04 Jan, 2014 07:42 AM

    gzQpzglgBZ's Avatar

    http://renom.com/http/#51 buying valium online forum

  5. 5 Posted by WilliamJub on 10 Jun, 2016 12:03 PM

    WilliamJub's Avatar

    Appreciating the time and energy you put into your forum and in depth information you provide. It's good to come across a forum every once in a while that isn't the same unwanted rehashed information. Excellent read! I've saved your site and I'm adding your RSS feeds to my Google account. Chananie

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac