CODEWITHSUNDEEP
twitter-bootstraplocalization
Makach
Makach

Reputation: 7569

How do you localize the Twitter Bootstrap

When downloading Twitters Bootstrap v3.1.1 I try to use some of the reusable items. These items have english text which I can find and easily override, but there are some messages that pops up and does field validation that I cannot find -- probably because I am not familiar with the framework.

How could I proceed to find out more about these fields?

For instance, the validation messages in the form-signin username has a validation message. How do I override this one? Where is the text located? Is there a pattern/best practice for doing this kind of localization?

So if you put this example into http://bootply.com it becomes easy to see what happens.

Field text and placeholder text is easy to localize.

But when you try to put in invalid email address you get a pop up. How do I localize this pop up when you put in NO-EMAIL and press submit?

<div class="container">
  <form class="form-signin" role="form">
    <h2 class="form-signin-heading">Please sign in</h2>
    <input type="email" class="form-control" placeholder="Email address" required autofocus>
    <input type="password" class="form-control" placeholder="Password" required>
    <label class="checkbox">
      <input type="checkbox" value="remember-me">
      Remember me
    </label>
    <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
  </form>
</div>

Upvotes: 9

Views: 6559

Answers (2)

Makach
Makach

Reputation: 7569

The translation is in the HTML 5 control. You can override this on the oninvalid event on the input element.

<input type="email" class="form-control" placeholder="E-post addresse" required autofocus oninvalid="this.setCustomValidity('your message')" >

Upvotes: 0

woj_jas
woj_jas

Reputation: 1088

I'm Almost 100% sure that popup is taken from jquery.js and you will have to dig there. This text (about email) changes language . I'm writing from Poland and I have polish pop-ups. If you want to use other validation jquery plugin

check this Unheap JS Repository

When you use Ketchup Validator you will have custom validating messages

Upvotes: 3

Related Questions