add validation on email field on woocommerce checkout page

Question

I want to fire validation to check entered email address is business email address or not immediately after lost focus from email field before submitting the form. I tried many filters

add_action('woocommerce_after_checkout_validation', 'rei_after_checkout_validation');

function rei_after_checkout_validation( $posted ) {

}

but filter is fired after submitting the form. Please help me to solve it.

if you want to do this on `.focus()` then you have to use AJAX and if you want to do it on form submit then WooCommerce has a hook, you can check [this answer](http://stackoverflow.com/a/42848932/5019802) — Raunak Gupta, Mar 28 '17 at 07:15

score 1 · Answer 1 · answered Mar 28 '17 at 07:10

1

You are trying to hook after checkout process. Try this code to achieve your functionality. Put it in your active theme's functions.php file and customize as you need.

add_action('woocommerce_checkout_process', 'is_email');

function is_email() { 
    $phone_number = $_POST['---your-email-field-name---'];
    // your function's body above, and if error, call this wc_add_notice
    wc_add_notice( __( 'Your email is not business.' ), 'error' );
}

answered Mar 28 '17 at 07:10

Vidish Purohit

1,048
11
20

it will be fired after submit the form.i want to fire it before submit the form – piyush Mar 28 '17 at 09:42
this hook triggers before checkout is processed. you can refer to woocommerce/includes/class-wc-checkout.php for more reference. – Vidish Purohit Mar 28 '17 at 09:46
If you want to fire before the form submission then what you have answered above through ajax on blur is fine. In case if you are looking for real-time email validation on woocommerce checkout page then try using plugins like clearout – GnanaPrakash Jun 27 '22 at 03:55

score 1 · Answer 2 · answered Mar 30 '17 at 09:37

I have done validation using below woocommerce hook.add it in your active theme's functions.php file.

    add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );


    function custom_override_checkout_fields( $fields ) {
        ?> 

    <script>


            jQuery('#billing_email').on('blur', function() {
                validationFunction();   
            });


            function validationFunction() {

                if(document.getElementById("billing_email").value!='')
                {
                console.log(document.getElementById("billing_email").value);
                var re = /^([\w-\.]+@(?!gmail.com)(?!yahoo.com)(?!hotmail.com)(?!yahoo.co.in)(?!aol.com)(?!abc.com)(?!xyz.com)(?!pqr.com)(?!rediffmail.com)(?!live.com)(?!outlook.com)(?!me.com)(?!msn.com)(?!ymail.com)(?!att.net)(?!comcast.net)(?!facebook.com)(?!gmx.com)(?!googleemail.com)(?!hotmail.co.uk)(?!mac.com)(?!google.com)(?!mail.com)(?!sbcglobal.net)(?!verizon.net)(?!yahoo.co.uk)(?!email.com)(?!games.com)(?!gmx.net)(?!hush.com)(?!hushmail.com)(?!icloud.com)(?!inbox.com)(?!lavbit.com)(?!love.com)(?!hush.com)(?!pobox.com)(?!rocketmail.com)(?!safe-mail.net.com)(?!wow.com)(?!ygm.com)(?!email.com)(?!zoho.com)(?!fastmail.fm)(?!yandex.com)([\w-]+\.)+[\w-]{2,4})?$/;
                if(re.test(document.getElementById("billing_email").value)==false)
                {
                    jQuery('#error').remove();
                    jQuery('#billing_email_field label').addClass('wrongemail');
                    jQuery('#billing_email_field input.input-text').addClass('wrongemailborder');
                    jQuery('#billing_email_field').append('<span class="wrongemail" id="error" style="font-size: 14px;">Please Enter valid business email address.<span>');
                    jQuery('#billing_email_field label').removeClass('rightemail');
                    jQuery('#place_order').attr('disabled',true);
                }
                else
                {
                    jQuery('#billing_email_field label').addClass('rightemailborder');
                    jQuery('#billing_email_field input.input-text').removeClass('wrongemailborder');
                    jQuery('#error').remove();
                    jQuery('#billing_email_field label').removeClass('wrongemail');
                    jQuery('#place_order').attr('disabled',false);
                }
                }
            }

</script>

<?php
    }
     return $fields;
    }

i bind the javascript blur event to email text field then check the email id enterd by user.

add validation on email field on woocommerce checkout page

2 Answers2