title: How to validate a 12 digit phone Number using javascript and bootstrap3
body: <p>I want to validate a 12 digit phone number in the form of this format
  92xxxxxxxxxx.</p>
  
  <p>eg:923337690977, 921234567890</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function () {
      $('#contact_form').bootstrapValidator({
              // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
              feedbackIcons: {
                  valid: 'glyphicon glyphicon-ok',
                  invalid: 'glyphicon glyphicon-remove',
                  validating: 'glyphicon glyphicon-refresh'
              },
              fields: {
                  first_name: {
                      validators: {
                          stringLength: {
                              min: 2,
                          },
                          notEmpty: {
                              message: 'Please supply your first name'
                          }
                      }
                  },
                  last_name: {
                      validators: {
                          stringLength: {
                              min: 2,
                          },
                          notEmpty: {
                              message: 'Please supply your last name'
                          }
                      }
                  },
                  email: {
                      validators: {
                          notEmpty: {
                              message: 'Please supply your email address'
                          },
                          emailAddress: {
                              message: 'Please supply a valid email address'
                          }
                      }
                  },
                  phone: {
                      validators: {
                          notEmpty: {
                              message: 'Please supply your phone number'
                          },
                          phone: {
                              country: 'PK',
                              message: 'Please supply a vaild phone number with area code'
                          }
                      }
                  },
                  address: {
                      validators: {
                          stringLength: {
                              min: 8,
                          },
                          notEmpty: {
                              message: 'Please supply your street address'
                          }
                      }
                  },
                  city: {
                      validators: {
                          stringLength: {
                              min: 4,
                          },
                          notEmpty: {
                              message: 'Please supply your city'
                          }
                      }
                  },
                  state: {
                      validators: {
                          notEmpty: {
                              message: 'Please select your state'
                          }
                      }
                  },
                  zip: {
                      validators: {
                          notEmpty: {
                              message: 'Please supply your zip code'
                          },
                          zipCode: {
                              country: 'US',
                              message: 'Please supply a vaild zip code'
                          }
                      }
                  },
                  comment: {
                      validators: {
                          stringLength: {
                              min: 10,
                              max: 200,
                              message: 'Please enter at least 10 characters and no more than 200'
                          },
                          notEmpty: {
                              message: 'Please supply a description of your project'
                          }
                      }
                  }
              }
          })
          .on('success.form.bv', function (e) {
              $('#success_message').slideDown({
                      opacity: "show"
                  }, "slow") // Do something ...
              $('#contact_form').data('bootstrapValidator').resetForm();
  
              // Prevent form submission
              e.preventDefault();
  
              // Get the form instance
              var $form = $(e.target);
  
              // Get the BootstrapValidator instance
              var bv = $form.data('bootstrapValidator');
  
              // Use Ajax to submit form data
              $.post($form.attr('action'), $form.serialize(), function (result) {
                  console.log(result);
              }, 'json');
          });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    #success_message{ display: none;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html &gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Bootstrap 3 Contact form with Validation&lt;/title&gt;
    
  
  
    
    &lt;link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'&gt;
  &lt;link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css'&gt;
  &lt;link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css'&gt;
  
        
  
    
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="container"&gt;
      &lt;form class="well form-horizontal" action=" " method="post"  id="contact_form"&gt;
          &lt;fieldset&gt;
              &lt;!-- Form Name --&gt;
              &lt;legend&gt;Contact Us Today!&lt;/legend&gt;
              &lt;!-- Text input--&gt;
              &lt;div class="form-group"&gt;
                  &lt;label class="col-md-4 control-label"&gt;First Name&lt;/label&gt;  
                  &lt;div class="col-md-4 inputGroupContainer"&gt;
                      &lt;div class="input-group"&gt;
                          &lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-user"&gt;&lt;/i&gt;&lt;/span&gt;
                          &lt;input  name="first_name" placeholder="First Name" class="form-control"  type="text"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- Text input--&gt;
              &lt;div class="form-group"&gt;
                  &lt;label class="col-md-4 control-label" &gt;Last Name&lt;/label&gt; 
                  &lt;div class="col-md-4 inputGroupContainer"&gt;
                      &lt;div class="input-group"&gt;
                          &lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-user"&gt;&lt;/i&gt;&lt;/span&gt;
                          &lt;input name="last_name" placeholder="Last Name" class="form-control"  type="text"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- Text input--&gt;
              &lt;div class="form-group"&gt;
                  &lt;label class="col-md-4 control-label"&gt;E-Mail&lt;/label&gt;  
                  &lt;div class="col-md-4 inputGroupContainer"&gt;
                      &lt;div class="input-group"&gt;
                          &lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-envelope"&gt;&lt;/i&gt;&lt;/span&gt;
                          &lt;input name="email" placeholder="E-Mail Address" class="form-control"  type="text"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- Text input--&gt;
              &lt;div class="form-group"&gt;
                  &lt;label class="col-md-4 control-label"&gt;Phone #&lt;/label&gt;  
                  &lt;div class="col-md-4 inputGroupContainer"&gt;
                      &lt;div class="input-group"&gt;
                          &lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-earphone"&gt;&lt;/i&gt;&lt;/span&gt;
                          &lt;input name="phone" placeholder="923xxxxxxxx0" class="form-control" type="text"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- Text input--&gt;
              &lt;div class="form-group"&gt;
                  &lt;label class="col-md-4 control-label"&gt;Address&lt;/label&gt;  
                  &lt;div class="col-md-4 inputGroupContainer"&gt;
                      &lt;div class="input-group"&gt;
                          &lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-home"&gt;&lt;/i&gt;&lt;/span&gt;
                          &lt;input name="address" placeholder="Address" class="form-control" type="text"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- Text input--&gt;
              &lt;div class="form-group"&gt;
                  &lt;label class="col-md-4 control-label"&gt;City&lt;/label&gt;  
                  &lt;div class="col-md-4 inputGroupContainer"&gt;
                      &lt;div class="input-group"&gt;
                          &lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-home"&gt;&lt;/i&gt;&lt;/span&gt;
                          &lt;input name="city" placeholder="city" class="form-control"  type="text"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- Select Basic --&gt;
              &lt;div class="form-group"&gt;
                  &lt;label class="col-md-4 control-label"&gt;State&lt;/label&gt;
                  &lt;div class="col-md-4 selectContainer"&gt;
                      &lt;div class="input-group"&gt;
                          &lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-list"&gt;&lt;/i&gt;&lt;/span&gt;
                          &lt;select name="state" class="form-control selectpicker" &gt;
                              &lt;option value=" " &gt;Please select your state&lt;/option&gt;
                              &lt;option&gt;Alabama&lt;/option&gt;
                              &lt;option&gt;Alaska&lt;/option&gt;
                              &lt;option &gt;Arizona&lt;/option&gt;
                              &lt;option &gt;Arkansas&lt;/option&gt;
                              &lt;option &gt;California&lt;/option&gt;
                              &lt;option &gt;Colorado&lt;/option&gt;
                              &lt;option &gt;Connecticut&lt;/option&gt;
                              &lt;option &gt;Delaware&lt;/option&gt;
                              &lt;option &gt;District of Columbia&lt;/option&gt;
                              &lt;option&gt; Florida&lt;/option&gt;
                              &lt;option &gt;Georgia&lt;/option&gt;
                              &lt;option &gt;Hawaii&lt;/option&gt;
                              &lt;option &gt;daho&lt;/option&gt;
                              &lt;option &gt;Illinois&lt;/option&gt;
                              &lt;option &gt;Indiana&lt;/option&gt;
                              &lt;option &gt;Iowa&lt;/option&gt;
                              &lt;option&gt; Kansas&lt;/option&gt;
                              &lt;option &gt;Kentucky&lt;/option&gt;
                              &lt;option &gt;Louisiana&lt;/option&gt;
                              &lt;option&gt;Maine&lt;/option&gt;
                              &lt;option &gt;Maryland&lt;/option&gt;
                              &lt;option&gt; Mass&lt;/option&gt;
                              &lt;option &gt;Michigan&lt;/option&gt;
                              &lt;option &gt;Minnesota&lt;/option&gt;
                              &lt;option&gt;Mississippi&lt;/option&gt;
                              &lt;option&gt;Missouri&lt;/option&gt;
                              &lt;option&gt;Montana&lt;/option&gt;
                              &lt;option&gt;Nebraska&lt;/option&gt;
                              &lt;option&gt;Nevada&lt;/option&gt;
                              &lt;option&gt;New Hampshire&lt;/option&gt;
                              &lt;option&gt;New Jersey&lt;/option&gt;
                              &lt;option&gt;New Mexico&lt;/option&gt;
                              &lt;option&gt;New York&lt;/option&gt;
                              &lt;option&gt;North Carolina&lt;/option&gt;
                              &lt;option&gt;North Dakota&lt;/option&gt;
                              &lt;option&gt;Ohio&lt;/option&gt;
                              &lt;option&gt;Oklahoma&lt;/option&gt;
                              &lt;option&gt;Oregon&lt;/option&gt;
                              &lt;option&gt;Pennsylvania&lt;/option&gt;
                              &lt;option&gt;Rhode Island&lt;/option&gt;
                              &lt;option&gt;South Carolina&lt;/option&gt;
                              &lt;option&gt;South Dakota&lt;/option&gt;
                              &lt;option&gt;Tennessee&lt;/option&gt;
                              &lt;option&gt;Texas&lt;/option&gt;
                              &lt;option&gt; Uttah&lt;/option&gt;
                              &lt;option&gt;Vermont&lt;/option&gt;
                              &lt;option&gt;Virginia&lt;/option&gt;
                              &lt;option &gt;Washington&lt;/option&gt;
                              &lt;option &gt;West Virginia&lt;/option&gt;
                              &lt;option&gt;Wisconsin&lt;/option&gt;
                              &lt;option &gt;Wyoming&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- Text input--&gt;
              &lt;div class="form-group"&gt;
                  &lt;label class="col-md-4 control-label"&gt;Zip Code&lt;/label&gt;  
                  &lt;div class="col-md-4 inputGroupContainer"&gt;
                      &lt;div class="input-group"&gt;
                          &lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-home"&gt;&lt;/i&gt;&lt;/span&gt;
                          &lt;input name="zip" placeholder="Zip Code" class="form-control"  type="text"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- Text input--&gt;
              &lt;div class="form-group"&gt;
                  &lt;label class="col-md-4 control-label"&gt;Website or domain name&lt;/label&gt;  
                  &lt;div class="col-md-4 inputGroupContainer"&gt;
                      &lt;div class="input-group"&gt;
                          &lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-globe"&gt;&lt;/i&gt;&lt;/span&gt;
                          &lt;input name="website" placeholder="Website or domain name" class="form-control" type="text"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- radio checks --&gt;
              &lt;div class="form-group"&gt;
                  &lt;label class="col-md-4 control-label"&gt;Do you have hosting?&lt;/label&gt;
                  &lt;div class="col-md-4"&gt;
                      &lt;div class="radio"&gt;
                          &lt;label&gt;
                          &lt;input type="radio" name="hosting" value="yes" /&gt; Yes
                          &lt;/label&gt;
                      &lt;/div&gt;
                      &lt;div class="radio"&gt;
                          &lt;label&gt;
                          &lt;input type="radio" name="hosting" value="no" /&gt; No
                          &lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- Text area --&gt;
              &lt;div class="form-group"&gt;
                  &lt;label class="col-md-4 control-label"&gt;Project Description&lt;/label&gt;
                  &lt;div class="col-md-4 inputGroupContainer"&gt;
                      &lt;div class="input-group"&gt;
                          &lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-pencil"&gt;&lt;/i&gt;&lt;/span&gt;
                          &lt;textarea class="form-control" name="comment" placeholder="Project Description"&gt;&lt;/textarea&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- Success message --&gt;
              &lt;div class="alert alert-success" role="alert" id="success_message"&gt;Success &lt;i class="glyphicon glyphicon-thumbs-up"&gt;&lt;/i&gt; Thanks for contacting us, we will get back to you shortly.&lt;/div&gt;
              &lt;!-- Button --&gt;
              &lt;div class="form-group"&gt;
                  &lt;label class="col-md-4 control-label"&gt;&lt;/label&gt;
                  &lt;div class="col-md-4"&gt;
                      &lt;button type="submit" class="btn btn-warning" &gt;Send &lt;span class="glyphicon glyphicon-send"&gt;&lt;/span&gt;&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/fieldset&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;/div&gt;&lt;!-- /.container --&gt;
    &lt;script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'&gt;&lt;/script&gt;
  &lt;script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'&gt;&lt;/script&gt;
  &lt;script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'&gt;&lt;/script&gt;
  
      
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The code is working fine for 10 digit phone number .but i need it for 12 digit phone number.</p>
  
  <p>Thanks in advance .</p>