Check email vendors and disable free vendors

Deny use free email vendors in contact form

Sometimes owner of websites want get email addresses of the official representatives some companies who register on their sites. In this case we face with the need to checking email fields in our contact form.

Problem: Deny opportunity use free email vendors in contact form.
Solutions: For simplicity we'll split into our solution on few stages.

Step 1: We need find list of free email vendors and create JSON file based it on. For example:

[
	{"domain":"1033edge.com"},
	{"domain":"11mail.com"},
	{"domain":"123.com"},
	...
	{"domain":"zydecofan.com"},
	{"domain":"zzn.com"},
	{"domain":"zzom.co.uk"}
] 

Step 2: Paste our free_email_vendors.json in the folder, that contain JS files and register it in WordPress in functions.php file.

<?php
...
define( 'TEMPLATE_DIRECTORY_URI', get_template_directory_uri() );

add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );

function enqueue_scripts() {
    wp_deregister_script( 'jquery' );
    wp_enqueue_script( 'jquery', TEMPLATE_DIRECTORY_URI . '/js/jquery-3.3.1.min.js', '', false );
    wp_enqueue_script( 'main-script', TEMPLATE_DIRECTORY_URI . '/js/jquery.main.js', [ 'jquery' ], null, true );

    wp_localize_script( 'main-script', 'base',
		[
			'template_url' => TEMPLATE_DIRECTORY_URI,
		]
	);
}
...

Step 3: Get data from JSON file in JS file.

(function ( $ ) {
    // Get Free Email Vendors List
    var free_email_vendors = [];
	
    $.getJSON( base.template_url + '/js/free_email_vendors.json', function ( data ) {
		$.each( data, function ( key, val ) {
			free_email_vendors.push( val.domain );
		} );
	} );
} )( jQuery );

Step 4: Create function check email domain in the contact form.

(function ( $ ) {
	checkEmailVendors();

    function checkEmailVendors() {
	    var form = $( '#form' );
	    var emailField = $( '.input_container [type=email]' );

	    if ( form.length > 0 && emailField.length > 0 ) {
		    var free_email_vendors = [];
		    var email_domain = null;
		    var email = null;
		    var submit = null;

            // Get Free Email Vendors List
		    $.getJSON( base.template_url + '/js/free_email_vendors.json', function ( data ) {
			    $.each( data, function ( key, val ) {
				    free_email_vendors.push( val.domain );
			    } );
		    } );

		    // Check Email Field User Keyup
		    emailField.on( 'input', function () {
			    email = this.value;
			    submit = emailField.parent().parent().find( '.submit' );

			    if ( email.indexOf( '@' ) != -1 ) {
				    if ( email.split( '@' )[1].length > 1 ) {
					    email_domain = email.split( '@' )[1];
					    if ( jQuery.inArray( email_domain, free_email_vendors ) !== -1 ) {
						    if ( $( '.email-warning-message' ).length == 0 ) {
							    $( this ).after( '<span class="email-warning-message">Sorry, you need to use company email address</span>' );
						    }
						    submit.prop( 'disabled', true );
					    } else {
						    $( '.email-warning-message' ).remove();
						    submit.prop( 'disabled', false );
					    }
				    }
			    }
		    } );

		    // Check Email After Submit
		    form.submit( function ( event ) {
			    emailField = $( this ).find( '.input_container [type=email]' );
			    email = emailField.val();
			    submit = $( this ).find( '.it_edb_submit' );

			    if ( email.split( '@' )[1].length > 1 ) {
				    email_domain = email.split( '@' )[1];
				    if ( jQuery.inArray( email_domain, free_email_vendors ) !== -1 ) {
					    event.preventDefault();
					    $( '.email-warning-message' ).remove();
					    submit.prop( 'disabled', true );
					    $( emailField ).after( '<span class="email-warning-message">Sorry, you need to use company email address</span>' );
				    } else {
					    $( '.email-warning-message' ).remove();
					    submit.prop( 'disabled', false );
				    }
			    }
		    } );
	    }
    }

} )( jQuery );

Example the contact form:

<form id="form" class="form" name="form" >
    <div class="input_container">
        <input type="email" name="email" value="" placeholder="Your Email" class="email" autocomplete="off" required="">
    </div>    
    <input type="submit" name="submit_button" value="Submit" class="submit">
</form>

Source:

1. https://gist.github.com/tbrianjones/5992856/