-1

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" class="custom-html-validation"
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.

Sparky
  • 98,165
  • 25
  • 199
  • 285
Eatsam ul haq
  • 317
  • 1
  • 12
  • This was the solution in the link which I used https://stackoverflow.com/questions/2457032/jquery-validation-change-default-error-message#:~:text=Add%20this%20code%20in%20a%20separate%20file/script%20included%20after%20the%20validation%20plugin%20to%20override%20the%20messages%2C%20edit%20at%20will%20%3A) – Eatsam ul haq Oct 28 '22 at 11:40
  • `Cannot read properties of undefined` means that you made a critical mistake with how you constructed your methods, called your methods, or included your scripts. Misspelling a rule or calling a rule that does not exist can cause this error. Since you have not shown us how you came to this error, there is no way anyone could help you solve it. Show us the working example of your code that reproduces the error. – Sparky Oct 28 '22 at 17:29

1 Answers1

-1

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

Eatsam ul haq
  • 317
  • 1
  • 12