Woocommerce Question posted in
The official Woocommerce documentation can be found here.

jQuery email field validation some problem – Woocommerce

I want to apply some conditions to the email address of the form field. The email address field is optional. The condition is-

  1. Do not show any errors when the email field is empty.
  2. But the error will only show when there is a value in the email field + the mail format does not match.

I did it well with the following jQuery code. But here’s the problem – when I apply this condition [ !$("#billing_email").val().match(/^b[A-Z0-9._%-]+@[A-Z0-9.-]+.[A-Z]{2,4}b$/i ) ], even if the email field is empty, the mail address is still required! But the mail field is not required.

How do I solve this problem?

$('form.checkout').on('submit', function () {
if ( $("#billing_email").val()!== '' && !$("#billing_email").val().match(/^b[A-Z0-9._%-]+@[A-Z0-9.-]+.[A-Z]{2,4}b$/i )) {

  if ( $("#billing_email").parent().next(".error").val() !== '') {
    $("#billing_email").parent().after("<span class='error'>Invalid email...</span>");
    $("#billing_email").focus(); //Focus on field   
  }
} 

else {
  $("#billing_email").parent().next(".error").remove();
} 
});
Tags:

3

Answers


  1. 0

    Your code is just works fine. I think you might need to add:

    $(this).find('.error').remove();

    before the if condition.

    Login or Signup to reply.
  2. 0

    I assume that there’s no problem with the front-end code. You are using woocommerce right? and you need the billing email address as optional. You need to set the billing email not required using woocommerce_checkout_fields hook in functions.php

    add_filter( 'woocommerce_checkout_fields' , 'override_checkout_fields' );

function override_checkout_fields($fields) {
  $fields['billing']['billing_email']['required'] = false;
  return $fields;
}
    Login or Signup to reply.
  3. 0

    The code is working as intended. I just tweaked it a bit to be more readable and to have more ‘ specific ‘ conditions.

    Check below

    ( i changed from submit to click so i can test it without submitting, you can change it back to submit )

    $('button').on('click', function() {
  const emailInput = $("#billing_email")
  const emailInputVal = $(emailInput).val()
  const emailInputParent = $(emailInput).parent()
  if (
    $(emailInputVal).trim().length > 0 &&
    !$(emailInputVal).match(/^b[A-Z0-9._%-]+@[A-Z0-9.-]+.[A-Z]{2,4}b$/i)
  ) {

    if ($(emailInputParent).next(".error").length === 0) {
      $(emailInputParent).after("<span class='error'>Invalid email...</span>");
      emailInput.focus(); //Focus on field   
    }
  } else {
    $(emailInputParent).next(".error").remove();
  }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="checkout">
  <span>
    <input id="billing_email" type="text">
  </span>

  <button type="submit">Submit</button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search