Streaming live at 10am (PST)

Date of Birth Select Form Validation

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

I am struggling with this too!

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