I have a requirement where I need to validate my form using JavaScript and displaying a Tooltip inside the Valid/Invalid field.

How can I write a conditional where IF the user enters the correct number a tick appears inside the field and IF it's false, it shows an error tooltip with a message detailing what the error is.

Ideally, I want to connect the JS code to an :valid,:invalid CSS pseudo class.

Here is a condition I currently use in my form:

//Assignment Number Validation - [Wizard 2]
  fd.spRendered(function() {
    fd.field('Assignment_x0020_Number_x0020_').validators.push({
        name: '',
        error: '',
        validate: function(value) {
            if ((/^\d{8}(-\d{1,2})?$/).test(value)) {
            $($(fd.field('Title').$el).find('input')[0]).attr('style', 'color:green');
            return true; // Validation succeded
            }
            // You land here if it did not succeed
            this.error = 'Invalid Assignment Number. Please enter a minimum of 8 digits.';
           $($(fd.field('Title').$el).find('input')[0]).attr('style', 'color:red');
            return false;
        }
    });
});

Can I negate this:

$($(fd.field('Title').$el).find('input')[0]).attr('style', 'color:green');
$($(fd.field('Title').$el).find('input')[0]).attr('style', 'color:red');

Replace with:

.fd-form .form-control.is-invalid{
  color: red!important;
}

.fd-form .form-control.is-valid{
  color: red!important;
}

I feel as though JQuery has some limitations in terms of styling, so I think the CSS above will provide more customisability.

In a nutshell, my question is: Will the form still validate with the :valid & :invalid CSS classes automatically or will I need to add something in the JS Script to 'Target' the :valid & :invalid CSS classes?

Any guidance on how I can approach this would be much appreciated.