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
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 variableisValid