Skip to content

Instantly share code, notes, and snippets.

@codehooligans
Last active August 20, 2022 07:47
Show Gist options
  • Save codehooligans/ec0605d2acb782a4a339 to your computer and use it in GitHub Desktop.
Save codehooligans/ec0605d2acb782a4a339 to your computer and use it in GitHub Desktop.
WooCommerce Checkout form DOB date field validation in jQuery
// We are using the WooCommerce Checkout Field Editor plugin in addition to WooCommerce. The Checkout Field Editor
// does a nice job at providing a UI for manage additional fields. But doesn't provide any method to do validations.
// So this code helps with that on a very specific implemention where we have a Gender select and a DoB date selector.
// On the Gender we want to ensure the selected value is 'Male' or 'Female' only. We don't want the
default option 'Choose Option' to be valid. On the DoB we want to enforce the user is 18 or older.
add_action( 'woocommerce_after_checkout_validation', 'woo_checkout_additional_field_validation' );
function woo_checkout_additional_field_validation() {
if (!defined('WOOCOMMERCE_CHECKOUT')) {
return;
}
// WooCommerce Checkout Field: DoB
if (isset($_POST['student_dob'])) {
if (empty($_POST['student_dob'])) {
wc_add_notice( __( '<strong>Date of Birth</strong> Please enter a valid date.', 'voice-verify' ), 'error' );
} else {
// Take the selected/entered date and at 18 years to it.
$dob = esc_attr($_POST['student_dob']);
$date_dob = date('Ymd', strtotime($dob.' +18 year'));
// Then take current date
$date_current = date('Ymd');
//echo "date_current[". $date_current ."]<br />";
if ($date_dob > $date_current) {
wc_add_notice( __( '<strong>Date of Birth</strong> You must be 18 years of age to register for the Adult online drivers education course.', 'voice-verify' ), 'error' );
}
}
}
// WooCommerce Checkout Field: Gender
if (isset($_POST['student_gender'])) {
if (empty($_POST['student_gender'])) {
wc_add_notice( __( '<strong>Gender</strong> Please select a gender', 'voice-verify' ), 'error' );
} else if (($_POST['student_gender'] != 'Male') && ($_POST['student_gender'] != 'Female')) {
wc_add_notice( __( '<strong>Gender</strong> Please select a valid gender', 'voice-verify' ), 'error' );
}
}
}
add_action( 'wp_footer', 'woo_checkout_field_date_inline_validation' );
function woo_checkout_field_date_inline_validation() {
if ( is_checkout() ) {
?>
<script type="text/javascript">
jQuery( document ).ready( function ( e ) {
//console.log('loaded');
process_dob_checkout_field();
function process_dob_checkout_field() {
if (jQuery('input#student_dob.hasDatepicker').length) {
//console.log('student_dob found');
//jQuery('#place_order').attr('disabled', 'disabled');
jQuery('input#student_dob.hasDatepicker').after('<span id="student_dob_error" style="display:none; color: red;"><?php _e('You must be 18 years of age to register', 'voice-verify'); ?></span>');
jQuery('input#student_dob.hasDatepicker').datepicker( 'option' , 'onClose', function() {
//console.log('date picker closed');
var dob_date_dd = ("0" + jQuery("input#student_dob.hasDatepicker").datepicker('getDate').getDate()).slice(-2);
var dob_date_mm = ("0" + jQuery("input#student_dob.hasDatepicker").datepicker('getDate').getMonth() + 1).slice(-2);
var dob_date_yy = jQuery("input#student_dob.hasDatepicker").datepicker('getDate').getFullYear() + 18;
var dob_date = dob_date_yy +''+ dob_date_mm +''+ dob_date_dd;
//console.log('dob_date[%o]', dob_date);
var today_Date = new Date();
var today_date_dd = ("0" + today_Date.getDate()).slice(-2);
var today_date_mm = ("0" + today_Date.getMonth() + 1).slice(-2);
var today_date_yy = today_Date.getFullYear();
var today_date = today_date_yy +''+ today_date_mm +''+ today_date_dd;
//console.log('today_date[%o]', today_date);
if (dob_date > today_date) {
//jQuery('#place_order').attr('disabled', 'disabled');
jQuery('span#student_dob_error').show();
jQuery('#student_dob_field').addClass('woocommerce-invalid');
jQuery('#student_dob_field').removeClass('woocommerce-validated');
} else {
//jQuery('#place_order').attr('disabled', false);
jQuery('span#student_dob_error').hide();
jQuery('#student_dob_field').removeClass('woocommerce-invalid');
jQuery('#student_dob_field').addClass('woocommerce-validated');
}
} );
} else {
//console.log('student_dob NOT found');
setTimeout(function() {
process_dob_checkout_field()
}, 500);
}
}
});
</script>
<?php
}
}
@tinyamasisurum0
Copy link

On line 58 I changed onClose event to onSelect,
so it does not give an error when datepicker is opened but closed without choosing any date.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment