Wordpress - Check if all required fields are filled in WooCommerce before showing popup

AryanChaurasia
July 12, 2023
198 views
1 vote
2 Answers

I want to verify if the form is required elements of the checkout form are filled before showing up the confirmation popup for Cash on Delivery.

// Popup Confirmation
function add_cod_confirmation_popup() {
    if ( ! is_checkout() ) {
        return;
    }

    $selected_payment_method_id = WC()->session->get('chosen_payment_method');
    // print_r( $selected_payment_method_id );
    // if ($selected_payment_method_id === "cod" ){
    // Replace 'cod' with the appropriate payment method ID for Cash on Delivery
    add_action( 'wp_footer', 'cod_confirmation_popup_script' );
    add_action( 'wp_footer', 'cod_confirmation_popup_style' );
    // }

}
add_action( 'wp', 'add_cod_confirmation_popup' );
function cod_confirmation_popup_script() {
  ?>
  <script>
    // Validate
    jQuery(document).ready(function($) {
      $('form.checkout').on('submit', function(e) {
            var $form = $(this);
            var confirmInput = $('input[name="payment_method"]:checked').val();
         
          
          if ((confirmInput === "cod") && ($('form.checkout.woocommerce-checkout').valid())){
              if ($('.confirmation-modal').length === 0) {
              e.preventDefault();

              var confirmationModal = '<div class="confirmation-modal">' +
                  '<div class="modal-content">' +
                  '<p>Are you sure you want to place the order with Cash on Delivery?</p>' +
                  '<button class="confirm-button">Confirm</button>' +
                  '<button class="cancel-button">Cancel</button>' +
                  '</div>' +
                  '</div>';

              $('body').append(confirmationModal);

              $('.confirm-button').on('click', function() {
                  $form.append(confirmInput);
                  $form.submit();
                  $('.confirmation-modal').remove();
              });

              $('.cancel-button').on('click', function() {
                  $('.confirmation-modal').remove();
                  location.reload(true);
              });
            }
          }
      });
  });      
  </script>
  <?php
}

function cod_confirmation_popup_style() {
  ?>
  <style>
      .confirmation-modal {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: rgba(0, 0, 0, 0.5);
          z-index: 9999;
      }

      .modal-content {
          background-color: #fff;
          padding: 20px;
          border-radius: 4px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      }
  </style>
  <?php
}

I’ve tried using the .valid() function but that didn’t worked because in WooCommerce there’s a different class to validate the forms. I want to utilize that class "require-validate" to check the form before clickon on place order.

Answers

// Popup Confirmation
function add_cod_confirmation_popup() {
    if ( ! is_checkout() ) {
        return;
    }

    $selected_payment_method_id = WC()->session->get('chosen_payment_method');
    add_action( 'wp_footer', 'cod_confirmation_popup_script' );
    add_action( 'wp_footer', 'cod_confirmation_popup_style' );
    // }

}
add_action( 'wp', 'add_cod_confirmation_popup' );

function cod_confirmation_popup_script() {
  ?>
  <script>
    // Validate
    jQuery(document).ready(function($) {
      $('form.checkout').on('submit', function(e) {
          var $form = $(this);
          var confirmInput = $('input[name="payment_method"]:checked').val();
          
          if ((confirmInput === "cod") && ($form.find('.require-validate').toArray().every(function(element) {
              return element.checkValidity();
          }))) {
              if ($('.confirmation-modal').length === 0) {
                  e.preventDefault();

                  var confirmationModal = '<div class="confirmation-modal">' +
                      '<div class="modal-content">' +
                      '<p>Are you sure you want to place the order with Cash on Delivery?</p>' +
                      '<button class="confirm-button">Confirm</button>' +
                      '<button class="cancel-button">Cancel</button>' +
                      '</div>' +
                      '</div>';

                  $('body').append(confirmationModal);

                  $('.confirm-button').on('click', function() {
                      $form.append(confirmInput);
                      $form.submit();
                      $('.confirmation-modal').remove();
                  });

                  $('.cancel-button').on('click', function() {
                      $('.confirmation-modal').remove();
                      location.reload(true);
                  });
              }
          }
      });
  });      
  </script>
  <?php
}

function cod_confirmation_popup_style() {
  ?>
  <style>
      .confirmation-modal {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: rgba(0, 0, 0, 0.5);
          z-index: 9999;
      }

      .modal-content {
          background-color: #fff;
          padding: 20px;
          border-radius: 4px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      }
  </style>
  <?php
}

Try Something like this may be helpful.

You can use .require-validate and iterate loop each and check field value is empty or not. and you can use the flag variable isValid

function cod_confirmation_popup_script() {
  ?>
  <script>
    // Validate
    jQuery(document).ready(function($) {
      $('form.checkout').on('submit', function(e) {
        var $form = $(this);
        var confirmInput = $('input[name="payment_method"]:checked').val();
        
        if (confirmInput === "cod") {
          var isValid = true;

          // Check if required fields are filled
          $('.require-validate').each(function() {
            var $field = $(this);
            if ($field.val() === '') {
              isValid = false;
              $field.addClass('error');
            } else {
              $field.removeClass('error');
            }
          });

          if (isValid) {
            if ($('.confirmation-modal').length === 0) {
              e.preventDefault();

              var confirmationModal = '<div class="confirmation-modal">' +
                  '<div class="modal-content">' +
                  '<p>Are you sure you want to place the order with Cash on Delivery?</p>' +
                  '<button class="confirm-button">Confirm</button>' +
                  '<button class="cancel-button">Cancel</button>' +
                  '</div>' +
                  '</div>';

              $('body').append(confirmationModal);

              $('.confirm-button').on('click', function() {
                  $form.append(confirmInput);
                  $form.submit();
                  $('.confirmation-modal').remove();
              });

              $('.cancel-button').on('click', function() {
                  $('.confirmation-modal').remove();
                  location.reload(true);
              });
            }
          } else {
            e.preventDefault();
          }
        }
      });
    });
  </script>
  <?php
}

Please signup or login to give your own answer.

Click here to cancel reply.

WordPress – Check if all required fields are filled in WooCommerce before showing popup

Answers