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.
Bootstrap validation with custom error message by using jQuery. The form validation in Bootstrap. In HTML 5, the default form validation is done for the fields marked with the required attribute. It will even check the email format for the field specified as type=”email” with the required attribute.
Bootstrap Input. Bootstrap supports all the HTML5 input types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color. ... The following example contains three radio buttons. The first option is checked by default and the last option is disabled: Example
A number of different types of fields are used in the form. For displaying a custom error message rather a single standard message you may use the data-error-msg attribute with each input type. For example, for the name field, you may specify the following message by using the data-error-msg data attribute:
For example, for a required input that was not filled out, event.target.validity.valueMissing will be true. You can call setCustomValidity on the input element to provide a custom error message. Add an event listener for the change event to reset the custom error when the input value changes. See this GitHub gist for a full index.html file.
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.
if you want to change invalid message you can use oninvalid attribute.
oninvalid="this.setCustomValidity('User ID is a must')"
hope this helps you.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With