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

Question

I'm using Twitter-Bootstrap in .NET 4.0. I'm not using any additional jquery validation plugins.

I have this code:

<asp:TextBox ID="Url" runat="server" required  Text=''  placeholder="enter the  URL" pattern="http://*"  messages="Must start with 'http://' or 'https://' "></asp:TextBox>

The Regex validation works if I type 'asdf' in:

My Question is: how do I customize the "Please match the requested format" error to say "Must start with 'http://' or 'https://'"?

As you can see I've tried "messages=". I've also tried several others.

1. How do I customize the generic error message?
2. Is there any documentation anywhere for Bootstrap that has more info on this?

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.

Comments

[mokumaxCraig]

Wow, I didn't realize that at all. It looks like IE 9 doesn't even use the validation. So, I guess I'll have to use some jquery validation after all. Have you had any success implementing any?

[zkcro]

To be honest it's not something I've had occasion to try doing yet. Good luck though :)

[Mohammed Javed]

But When I insert the title in the input field. that message continues showing validation not working. when I click on the submit button with valid value its stuck on email field. I am using here bootstrap validator also.