bootstrap form helper phone wont work

Question

I m trying to make a website using form Bootstrap framework. As part of my code I have

<div class="control-group">
<label class="control-label" for="inputTell">Telephone</label>
<div class="controls">
<input type="text" id="inputTell" class="bfh-phone" data-format="(ddd) ddd-dddd">
</div>
</div>

This is the image:

It shouldnt be like that. It shouldn't accept any strings and it should give me the phone format like this:

I already have the necessary JS files in my directory but I am not sure why it is not working.

Answer 1

Make sure the input field is inside a form. The phone helper will not work correctly otherwise.

<form>
  <div class="control-group">
    <label class="control-label" for="inputTell">Telephone</label>
    <div class="controls">
      <input type="text" id="inputTell" class="bfh-phone" data-format="(ddd) ddd-dddd">
    </div>
  </div>
</form>

Example jsfiddle

Answer 2

also, the input type must be "text" or "tel" for formhelpers to work:

snippet part from bootstrap-formhelpers.min.js:

    ... ('form input[type="text"].bfh-phone, 
          form input[type="tel"].bfh-phone, span.bfh-phone').each(function(){
     ... 
 }); 

may be useful for someone

Answer 3

you've forgotten to add <form> tag.

just put your code inside a <form> tag, and it will start working.

<form>

    <input type="text" id="inputTell" class="bfh-phone" data-format="(ddd) ddd-dddd">

</form>

Note: also add necessary classes of bootstrap like controls, form etc.

Answer 4

I've try use type tel and another class

<div class="control-group">
   <input type="tel" class="form-control bfh-phone" data-format="(ddd) ddd-dddd" name="number" required>
</div>