Support » Plugin: WooCommerce Email Validation » Match two email address in real time

  • Resolved Hernan Villanueva


    Have you thought about verifying the two email fields in real time? Something along the lines of:

    if($("#author_email").val() != $("#author_confirm_email").val())
    alert("emails don't match, sucka");

    I would love to hear what your thoughts are on this!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Hugh Lashbrooke


    Hi Hernán,

    While that sounds like it would be a decent idea (albeit with a different error message than the one you have suggested here), I am hesitant to add a feature like that for one main reason:

    WooCommerce core does not handle checkout form validation that way.

    The implication here is that if this one field acted in that way, then it would make the whole form seem imbalanced and like the individual fields aren’t talking to each other properly. If WooCommerce ever implemented that sort of field validation in core then I would update this plugin to act in the same way, but for now I’m not going to do that (even though it wouldn’t be very difficult to do).


    Sorry to bother you with more questions, but this is something that I’m willing to implement myself. Before I do that though, I would like to understand the downsides.

    What do you mean with the form would seem imbalanced? The “Confirm Email” field does not need to display an alert (as I initially suggested); it can simply turn red with the .woocommerce-invalid class. It would use a function similar in concept to the validate_field one in woocommerce/assets/js/frontend/checkout.js. Furthermore, this check will only take place in the frontend. I would still like for your plugin to perform a backend check (using PHP) for reassurance.

    Something like this:

    jQuery( function( $ ) {
    	// wc_checkout_params is required to continue, ensure the object exists
    	if ( typeof wc_checkout_params === 'undefined' ) {
    		return false;
    	// Inline validation
    	$( 'form.checkout' ).on( 'blur change', '.input-text, select, input:checkbox', function() {
    		var $this     = $( this ),
    			$parent   = $this.closest( '.form-row' ),
    			validated = true;
    		if ( $ '.validate-email-confirmation' ) ) {
                            // Original email field.
    			if ( $( '.validate-email input' ).val() ) {
    				if ( $( '.validate-email input' ).val() != $this.val() ) {
    					$parent.removeClass( 'woocommerce-validated' ).addClass( 'woocommerce-invalid woocommerce-invalid-email' );
    					validated = false;
    		if ( validated ) {
    			$parent.removeClass( 'woocommerce-invalid woocommerce-invalid-required-field' ).addClass( 'woocommerce-validated' );
    	} );
    } );

    This assumes that the “Confirm Email” field has the class validate-email-confirmation in it.

    I still need to make sure that the script plays along well with the original email field for different cases. Again, I would like to know if this is something you would be willing to consider in your plugin, or if I should just implement my own solution.

    Thanks for your time!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Match two email address in real time’ is closed to new replies.