[SOLVED] Input Error State Never Triggers

I have tried all methods to try to validate the correct date format and if it’s incorrect, the error state of the input will trigger (turning the input to red). It’s validating (or not) correctly but 1) not on blur like it should, 2) not showing the correct style. Any help is appreciated

function validateDate(testdate) {
        var date_regex = /^(0?[1-9]|1[0-2])\/(0?[1-9]|1\d|2\d|3[01])\/(19|20)\d{2}$/;
        return date_regex.test(testdate);

export function age_blur(event) {
// validateDate($w('#age').value
   $w("#age").onCustomValidation( (value, reject) => {
      if (validateDate(value)) {
         console.log("correct date")
         if (calculateAge(value) < 1) {
            $w('#dropdown2').selectedIndex = 1;
         }else if (calculateAge(value) >= 1 && calculateAge(value) <= 7){
            $w('#dropdown2').selectedIndex = 3;
         }else if (calculateAge(value) >= 8){
            $w('#dropdown2').selectedIndex = 5;

      reject("bad date")



function calculateAge (birthDate) {
   var input = birthDate;
   var output = input.replace(/(\d\d)\/(\d\d)\/(\d{4})/, "$3-$1-$2");
   var a = moment(output);
   var b = moment();
   var diffDuration = moment.duration(a.diff(b));

   var years = diffDuration.years() * -1;

  return years;

As stated in the documentation, the onCustomValidation() API “adds an event handler that runs when the element’s validation is checked.” That is, it does not run the code, it only sets what code will be run when validation is triggered.

You should be setting the onCustomValidation() event handler for #age inside of the page’s onReady() function. This will cause the custom validation code to run when the need for validation is triggered. You will want something like this:

$w.onReady( function() {

    $w("#age").onCustomValidation( (value, reject) => {
        // your validation code
    } );

    ... the rest of your onReady() code ...
} );

Thank you, moving it to onReady was the solution that worked