Set oninvalid and oninput properties of input fields from jquery-CodePudding

I want to use custom form validation for my input fields. I want to display a custom message and make borders red of input fields. The problem is that I am unable to do this in jQuery. For Html, I have found the following solution.

<form:input id="valid-to" required="required" type="text" 
oninvalid="this.setCustomValidity('Enter User Name Here')"
oninput="this.setCustomValidity('')"/>

This oninvalid does work correctly and displays message when user submits the form. How can I use similar functionality in jQuery. I have tried the solution from jQuery validation: change default error message but it did not resolve my problem and I got Cannot read properties of undefined (reading 'messages') in browser console.

CodePudding user response：

After some research, I found the following solution:

$(document).on('focus', '.custom-html-validation', function(){
    $(this).get(0).setCustomValidity('Please enter valid information');
})

The above code shows error message as Please enter valid information when submit button is clicked