How to Provide an Age Restriction on the Datepicker Form Field

Introduction

Would you like to provide an age restriction for the datepicker on your form? You can easily put in a small code snippet that will evaluate the date and provide an alert message on the page if the date doesn’t fall within a certain guideline.

In this example, we’re creating a sign up form for a children’s ballet class that can only accept children between the ages of 5 and 12.

Setting up your form

In the first step, just create a new form and add a Date / Time form field to your form.

Add Date/Time form field to your form.

Once you’ve saved your form, you can move onto the next step.

Implementation Options

Adding an alert box

If you would like an alert to show on screen when your visitors choose their date, simply add this code snippet to your site. If you need assistance on how to add code snippets to your site, please review this tutorial.

/**
 * Display an alert box if the date doesn't fall within the guidelines.
 *
 * @link  https://wpforms.com/developers/how-to-provide-an-age-restriction-on-the-datepicker-form-field/
 * 
 */

function wpf_dev_check_age() {
?>
<script>
jQuery(function($){
	
 window.wpforms_1425_10 = window.wpforms_1425_10 || {};
        		window.wpforms_1425_10.datepicker = {
					mode:"single",				
					onClose: function(selectedDates, dateStr, instance) {
					var year = selectedDates[0].getFullYear();
					 if(year<2007 || year>2015){
					  alert('Minimum age requirement is 5 or maximum age requirement is 12');
					 this.clear();
					 }
					}
				}
});
	
</script>
<?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_check_age' );

In the code snippet above, there’s a few things to be updated. Our example form ID is _1425 and our Date / Time field ID is _10, you’ll need to update this code snippet to match your own form and field IDs. If you need any assistance in finding your form and field IDs, please review this tutorial.

Also remember to update the 2007 and 2015 to meet your requirements. If you were only needing to evaluate one date, just remove the || year>2015 above and update the 2007 to the year you need to review.

Finally, you’ll need to also update your message that will display in the alert window.

Now if a visitor selects a Date of Birth that is before 2007 or above 2015, an alert will display on screen.

This code snippet provides an age restriction alert message that appears on screen

Adding an error message on submit

If you would just like to stop the form from submitting and provide a message under the form field, you can simply add this code snippet to your site instead.

/**
 * Display an error message on submission of the form if the date doesn't fall within the guidelines.
 *
 * @link  https://wpforms.com/developers/how-to-provide-an-age-restriction-on-the-datepicker-form-field/ *
 */

function wpf_dev_process( $fields, $entry, $form_data ) {
      
    // Optional, you can limit to specific forms. Below, we restrict output to
    // form #1425.
    if ( absint( $form_data['id'] ) !== 1425 ) {
        return $fields;
    }
    if (isset($fields[10]['value'])) {
    $timestamp = strtotime($fields[10]['value']); 
    $year=date('Y',$timestamp);
}
    if($year < 2007 || $year > 2015)
        {  
  
            // Check the field ID 10 and show error message at the top of form and under the specific field
               wpforms()->process->errors[ $form_data['id'] ] [ '10' ] = esc_html__( 'Minimum age requirement is 5 or maximum age requirement is 12', 'plugin-domain' );
          }
    }
add_action( 'wpforms_process', 'wpf_dev_process', 10, 3 );

Just like with the first code snippet, there are a few things you’ll want to update such as the 1425 to match your own form ID, updating the field ID of 10 to match your own field ID as well as the years being evaluated in if($year < 2007 || $year > 2015) and the message that will display on error: Minimum age requirement is 5 or maximum age requirement is 12.

With this code snippet, if the dates fail the age restriction, a message will display under the field when the Submit button is clicked.

With this alternative code, the age restriction message will display once the Submit button has been clicked.

And that’s it! You’ve successfully implemented the age restriction on your form for your datepicker field. Would you like to also custom the datepicker field in other ways? Check out our tutorial on How to Customize the Date Time Field Date Options.

Action References: