JQuery validate plugin with e-mail validation

Question

I am currently using JQuery Validate plugin in along with some tip plugin to validate a form. I need to validate the e-mail address as well, other then just checking all fields have been filled out. I am familiar with the Validate rules function, however it causing a problem.

As soon as the e-mail evaluates to be invalid, with my current implementation, all following text fields appear to be invalid (by generating a plugin tip) and causes all following fields to have an annoying tip saying this field is required before the user even had a chance to fill them out.

I was wondering if there was a way to check if my e-mail validation function returned true from within the validate call, where if it does not return true, then consider the form invalid.

Later on I will need to implement a password regex function that will follow the same logic.

My Form Validation

 $(".form").validate({
            errorPlacement: function(error, element) {
            },
            highlight: function(element, errorClass, validClass) {
                $(element).css('border', '1px solid red');
                $('.addlefttip').qtip({
                    position: {
                        my: 'middle left', 
                        at: 'middle right'
                    },
                    show: {
                        event: 'focus'
                    },
                    hide:{
                       event: 'blur'
                    },
                    style: {
                            classes: 'qtip-blue qtip-shadow'
                        },
                        content: {
                            attr: 'alt'
                        },
                    });
                    $('.addtoptip').qtip({
                        position: {
                            my: 'bottom left', 
                            at: 'top right'
                        },
                        show: {
                            event: 'focus'
                        },
                        hide:{
                            event: 'blur'
                        },
                        style: {
                            classes: 'qtip-blue qtip-shadow'
                        },
                        content: {
                            attr: 'alt'
                        },
                    });
                },
                rules: {
                    email: {
                        minlength: 5
                    }
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).css('border', '1px solid #ddd');
                }
            });

My e-mail validation:

    $('.email-field').change(function(){
            var email = $(this).val();

            var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

            if(re.test(email)) {
                document.getElementById('result').innerHTML = '<span style="color:green; font-style:italic; font-weight:normal;"><img src="http://myhousesforsaleindetroit.com/wp-content/uploads/2012/08/green-check-mark.png"> valid';
            } else {
                document.getElementById('result').innerHTML = '<img src="http://upload.wikimedia.org/wikipedia/en/archive/8/89/20070603232424!RedX.png" style="width:15px; margin:-2px 0px 0px 0px;"/> invalid';
            }
        });

I appreciate any suggestions!

Many thanks in advance!

Sparky Sparky · Accepted Answer · 2013-04-07T22:52:49

I guess I'm not fully understanding your implementation. It seems pointless to use a form validation plugin and then bypass part of it with a custom change handler. Since you're using the jQuery Validate plugin, why not just use its built-in email rule?

Otherwise, if you like your email function better, turn it into a custom rule using the built-in addMethod() method.

$.validator.addMethod("myCustomRule", function(value, element) { 
      return /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(value); 
}, "Custom message for this rule");

It's implemented just like any other rule...

rules: {
   myfield: {
       myCustomRule: true
   }
}

As far as using qTip2 with jQuery Validate, I've done it like this...

$(document).ready(function () {

    $('#myform').validate({ 
        // any other options & rules,
        errorPlacement: function (error, element) {
            $(element).filter(':not(.valid)').qtip({
                overwrite: false,
                content: error,
                show: {
                    event: false,
                    ready: true
                },
                hide: false
            }).qtip('option', 'content.text', error);
        },
        success: function (error) {
            setTimeout(function () {
                $('form').find('.valid').qtip('destroy');
            }, 1);
        }
    });

});

DEMO, jQuery Validate with qTip2: http://jsfiddle.net/96AM4/

However lately, I've been using Tooltipster instead because its integration with jQuery Validate is somewhat cleaner.

$(document).ready(function () {

    // initialize Tooltipster on form input elements
    $('#myform input[type="text"]').tooltipster({ 
        trigger: 'custom', // default is 'hover' which is no good here
        onlyOne: false,    // allow multiple tips to be open at a time
        position: 'right'  // display the tips to the right of the element
    });

    // initialize jQuery Validate
    $('#myform').validate({
        // any other options & rules,
        errorPlacement: function (error, element) {
            $(element).tooltipster('update', $(error).text());
            $(element).tooltipster('show');
        },
        success: function (label, element) {
            $(element).tooltipster('hide');
        }
    });

});

Side-note:

It's best not to leave a callbcak function empty like this:

errorPlacement: function(error, element) {
},

Use this instead if your intention is to suppress the default error messages:

errorPlacement: function(error, element) {
    return false;
},

DEMO, jQuery Validate with Tooltipster: http://jsfiddle.net/kyK4G/

JQuery validate plugin with e-mail validation

2 Answers