Date of Birth Select Form Validation

Design help Custom code
1

Wondering if someone could assist in helping me with adding validation to have user be over age of 13 to be able to submit the form. Without using https://jqueryvalidation.org/ or if this is possible.

Website Link : https://dateofbirth.webflow.io/

Here is my site Read-Only: LINK

2

I am struggling with this too!

3

Found a solution:

You will need to add a normal button and hide the default form submit button.

See below for the code.

Normal Button was given an id of #click-me
Actual Form Submit Button given a id of #actual-btn

Feel free to define it however you like.

<script>
$(document).ready(function() {

// getAge function
function getAge(dateString){
  // get today's date
  const today = new Date();
  // get user birth date
  const birthDate = new Date(dateString);
  // calculate user age
  // subtract their birth year from current year
  let age = today.getFullYear() - birthDate.getFullYear();
  // // subtract user birth month from current month
  const month = today.getMonth() - birthDate.getMonth();
  // if month <= 0 
  // OR
  // today's date is less than user's birth date
  if(month < 0 || (month === 0 && today.getDate() < birthDate.getDate())){
    // reduce user's age by 1
    age--;
  }
  // return user's current age
  return age;
}


  
  	$("#click-me").on("click", function() {
   // get year, month & day values
  const year = $('#YEAR').val();
  const month = $('#MONTH').val();
  const day = $('#DAY').val();	    
  // make date string
  // e.g. '2000-09-02'
  const date = year + '-' + month + '-' + day;
  // if user's age >= 21
  if(getAge(date) < 13){
    // show error message
    $('.error').fadeIn(500);
 }
  else{ // if user's age > 13
    $('#actual-btn').click();				
  }
  })    

});
1 Like