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 its 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();
}
}
}
}
}
});