Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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:

enter image description here

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?
like image 658
mokumaxCraig Avatar asked Feb 17 '13 21:02

mokumaxCraig


People also ask

How to use bootstrap validation with custom error message using jQuery?

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.

What is Bootstrap input type?

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

How do I display a custom error message in the form?

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:

How to create a custom error message for required input?

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.


2 Answers

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):

Input validation using the pattern and title attributes

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.

like image 128
zkcro Avatar answered Sep 19 '22 09:09

zkcro


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

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

hope this helps you.

like image 45
Pedro Romão Avatar answered Sep 20 '22 09:09

Pedro Romão