How do you specify a custom error message in Bootstrap for input fields

Question

Solution 1

This actually has nothing to do with bootstrap, rather this the implementation of html5 form input validation in your browser (Chrome, by the look of your screenshot).

When using the pattern attribute, you should use the title to provide additional help to the user (see the MDN docs).

With title="Must start with 'http://' or 'https://'", you should see something like (in Chrome, different browsers will render this differently):

You could also try changing the input type to URL, which would give you a different message even without the title, but my own experience has been that sometimes the browser implemented validation can be a little frustrating.

Solution 2

if you want to change invalid message you can use oninvalid attribute.

oninvalid="this.setCustomValidity('User ID is a must')"

hope this helps you.