Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

I've written this as part of my contact form on my website. It checks to see if required inputs are empty, if so adds a red warning color and text. It also checks the email field for a properly formatted email.

This code works 100%, but somehow I feel like I'm repeating myself and I am not sure how to eliminate the repetition. Most importantly I am not sure how to reference nested "this". What I mean is if my input is jQuery(this) and then I use traversing to get to it's parent div.

How can I reference that DIV over and over again, without having to traverse over and over again?

//Check current language and prepare warning text
var current_language = jQuery('html').attr('lang');

if (current_language == 'en-CA') {
    var empty_field_message = 'This field is required.';
    var invalid_email = 'This email address seems invalid.';
}
else {
    var empty_field_message = 'Ce champ est requis.';
    var invalid_email = 'L\'adresse email semble invalide.';
}

//Email validation script
function validateEmail($email) {
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    if( !emailReg.test( $email ) ) {
        return false;
    } else {
        return true;
    }
}


//Fire on all input elements of the form
jQuery( ':input' ).on( 'focus', function() {
    //Add a highlight color to div containing the currently active form element
    jQuery(this).closest( '.frm-holder' ).addClass( 'frm-field-focus' );
}).on('blur', function() {

    //Remove the highlight once user moves off the input
    jQuery(this).closest( '.frm-holder' ).removeClass( 'frm-field-focus' );

    //Check if field was required
    if ( jQuery(this).hasClass('wpcf7-validates-as-required') ) {

        //Check if it was empty
        if ( !jQuery.trim(jQuery(this).val()) ) {

            //Add a red background to the wrapping DIV
            jQuery(this).closest( '.frm-holder' ).addClass( 'frm-field-required' );

            //Remove any other warning spans and put in empty field warning
            jQuery(this).siblings( 'span.wpcf7-not-valid-tip' ).remove();
            jQuery(this).after('<span class="wpcf7-not-valid-tip" role="alert">' + empty_field_message + '</span>');

        }
        //If it wasn't empty
        else {

            //Check if it's an email field
            if ( jQuery(this).attr('type') == 'email') {
                //If email is invalid
                if( !validateEmail( jQuery(this).val() ) ) { 
                    //Remove any other warning spans
                    jQuery(this).siblings( 'span.wpcf7-not-valid-tip' ).remove();

                    //Check if wrapping DIV does not have red background
                    if ( !jQuery(this).closest( '.frm-holder' ).hasClass( 'frm-field-required' ) ) {
                        //Add wrapping DIV red background
                        jQuery(this).closest( '.frm-holder' ).addClass( 'frm-field-required' );
                    }

                    //Add new warning span
                    jQuery(this).after('<span class="wpcf7-not-valid-tip" role="alert">' + invalid_email + '</span>');
                }
                //If email is valid
                else {
                    //Remove wrapping DIV red background
                    jQuery(this).closest( '.frm-holder' ).removeClass( 'frm-field-required' );
                    //Remove warning span
                    jQuery(this).siblings( 'span.wpcf7-not-valid-tip' ).remove();
                }
            }
            //If not email field
            else {

                //Check if wrapping DIV has red background
                if ( jQuery(this).closest( '.frm-holder' ).hasClass( 'frm-field-required' ) ) {

                    //Remove wrapping DIV red background
                    jQuery(this).closest( '.frm-holder' ).removeClass( 'frm-field-required' );

                    //Check if warning span exists
                    if ( jQuery(this).siblings( jQuery('span.wpcf7-not-valid-tip').length ) ) {

                        //Remove warning span
                        jQuery(this).siblings( 'span.wpcf7-not-valid-tip' ).remove();
                    }
                }
            }
        }

    }

});
share|improve this question
    
You should probably have a look at stackoverflow.com/questions/201323/… –  Josay Feb 12 at 14:04
    
@Josay thank you for that link. After reading through it, there still doesn't seem to be 100% agreement on what's best to implemennt. Seems like every solution has some upside and downsides. I decided to change my code to this, what do you think? –  Amir Feb 12 at 14:26
    
Post rolled back. Please do not update the original code from answers; that will invalidate them. For a follow-up review, post a new question. –  Jamal Feb 12 at 15:03
add comment

1 Answer

up vote 5 down vote accepted

From a once over:

I would do the languages like this:

var translations = {
  'en-CA' : {
    emptyFieldMessage: 'This field is required.',
    invalidEmail     : 'This email address seems invalid.'
  },
  'fr-CA' : {
    emptyFieldMessage: 'Ce champ est requis.',
    invalidEmail     : 'L\'adresse email semble invalide.'    
  }
}

var messages = translations[ jQuery('html').attr('lang') ];

Then you can access emptyFieldMessage as messages.emptyFieldMessage

This:

if( !emailReg.test( $email ) ) {
    return false;
} else {
    return true;
}

can be this because you are evaluating a boolean to return a boolean:

return emailReg.test( $email );

The //If not email field else block can be reduced to:

//If not email field
else {
  //Remove wrapping DIV red background
  jQuery(this).closest( '.frm-holder' ).removeClass( 'frm-field-required' );
  //Remove warning span
  jQuery(this).siblings( 'span.wpcf7-not-valid-tip' ).remove();
}

if you are going to remove a class, dont check for it's existence, just call removeClass, it will silently do nothing if the class was not there in the first place. The same goes for remove(), just call it, dont check prior.

This is most likely wrong as per Josay:

var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

Very important, create a var $this = jQuery(this); instead of calling over and over again jQuery(this).

share|improve this answer
    
Thank you for your suggestions, I've updated my code. I wasn't aware that removeClass and remove won't do any damage if just fired. That cleaned up a lot of the code. What about addClass, I have one more check in my code to make sure it doesn't keep adding the same class over and over again. Is that necessary? –  Amir Feb 12 at 14:47
    
@Amir Not needed indeed. –  konijn Feb 12 at 14:48
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.