jQuery.validation add Method error on birthday age validation

Question

I'm using the jQuery.validation gem, and I'm having an unknown portion of code appear when the age is over 18 in the console. You can submit the form, but the error message doesn't disappear dynamically after you've inputed the correct value. I think it's a straight forward error with how my message is appearing but I can't figure it out.

The console highlights

• From the jQuery Validation Plugin v1.13.1 "result = $.validator.methods[ method ].call( this, val, element, rule.parameters );"

profiles.js

  $(document).ready(function () {
  {{$('#new_profile').validate({
  rules: {
 'profile[first_name]': {
   required: true,
   minlength: 2
 },
 'profile[last_name]': {
   required: true,
   minlength: 2
 },
  'profile[location]': {
    required: true,
    minlength: 2
  },
'profile[birthday]': {
    check_date_of_birth: true,
    require: true
  },
  'profile[operating_system]': {
    minlength: 1
  },
  'profile[about_me]': {
    required: true,
    minlength: 5,
    maxlength: 500
  }
}
   })
});

$.validator.addMethod("check_date_of_birth", function(value, element) {

var birthday = $("#profile_birthday").val();
var birthdaydate = Date.parse(birthday);
var difference = Date.now() - birthdaydate;
var ageYear = new Date(difference);
var age = Math.abs(ageYear.getUTCFullYear() - 1970);
return age > 18;
}, "You must be at least 18 years of age.");

profile_form

<div class="form_input">
<%= f.label(:birthday, "Date of Birth:") %>
<%= f.date_field(:birthday) %>
<label id="errorBirthday"></label>

Answer 1

We need to extend the plugin to create a custom validation method for checking a minimum age using the data of birth:

<input type="date" name="dob" placeholder="mm/dd/yyyy"/>

 $(document).ready(function() { $.validator.addMethod("minAge", function(value, element, min) { var today = new Date(); var birthDate = new Date(value); var age = today.getFullYear() - birthDate.getFullYear(); if (age > min + 1) { return true; } var m = today.getMonth() - birthDate.getMonth(); if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) { age--; } return age >= min; }, "You are not old enough!"); $("form").validate({ rules: { dob: { required: true, minAge: 18 } }, messages: { dob: { required: "Please enter you date of birth.", minAge: "You must be at least 18 years old!" } } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script> <form> <input type="date" name="dob" placeholder="mm/dd/yyyy" /> <br><br> <input type="submit" value="Submit"> </form>

Answer 2

The answer from yathavan was a life saver. I only had one minor adjustment, to make it so it would still flag it as an invalid date in case there was only a 1 day difference between the proper age or being too young:

(added a ' <= ' when comparing the current day with the birth day), as follows:

if (m < 0 || (m === 0 && today.getDate() <= birthDate.getDate())) {
  age--;
}