skip to Main Content

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.

2

Answers


  1. // 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.

    Login or Signup to reply.
  2. 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
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search