CODEWITHSUNDEEP
htmltwitter-bootstrap-3
Annie
Annie

Reputation: 73

Phone number validation bootstrap3

I am trying to create a form in my website for people to able to put phone number and submit the form. But when I type alphabets instead of numbers, it still accepted. Is there anyway I can check phone validation using Bootstrap 3?

Here is my code

<footer>
  <hr>
  <div class="container text-center">
    <h3>Subscribe for special offer</h3>
    <p>Enter your information</p>

    <form action="" class="form-inline">
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name" placeholder="Name" required="required">
      </div>
      <div class="form-group">
        <label for="email">Email</label>
        <input type="email" class="form-control" id="email" placeholder="Email" required="required">
      </div>
      <div class="form-group">
        <label for="phone_no">Phone Number</label>
        <input type="text" name="num" data-validation="number" data-validation-allowing="negative,number" input name="color" data-validation="number" datavalidation-ignore="$" required="required" class="form-control" id="phone_no" placeholder="Phone Number">

      </div>
      <button type="submit" class="btn btn-default">Subscribe</button>
      <hr>
    </form>
    <!--End form-->

    <hr>

  </div>
  <!--End Container-->

</footer>

Upvotes: 2

Views: 36056

Answers (7)

Rules
Rules

Reputation: 51

adding to @user379888's solution, one should also use maxlength and minlength attributes, as the only error message shown by it is a tooltip that says "matching pattern failed", use the following code to give the user appropriate warning if the length is not matching. The following code shows a proper msg of invalid length, assuming you want your form to accept only 10-digit phone numbers and doesn't allow characters but numbers only without any special characters or format

<form>
<h2>Phone Number Validation</h2>
<label for="phone">Phone Number:</label><br/>
<input id="phone" type="tel" minlength="10" maxlength="10" pattern="^\d{10}$" required >
<input type="submit" value="Submit">
</form>

Upvotes: 0

user21946730
user21946730

Reputation: 1

Do it with changing type to tel

<input
              className="form-control"
              id="emergencno"
              name="emergencyNo"
              onChange={handleChange}
              defaultValue={props.updateuser.emergencyNo}
              type="tel"
              maxLength="10"
            />

Upvotes: 0

jitendra singh rathore
jitendra singh rathore

Reputation: 27

Just try min number and max number for phone number it may vary as per your country works on bootstrap 4 and bootstrap 5

<input class="form-control" id="phoneNumber" type="number" min="1000000000" max="9999999999" placeholder="Phone Number"  required />

Upvotes: 0

max
max

Reputation: 8667

Bootstrap doesn't provide any form validation system.

You can use a little trick to allow only numbers or you can use one of the available JavaScript plugins (for example http://formvalidation.io/).

<input type="text" onkeypress="return event.charCode >= 48 && event.charCode <= 57" required>

Upvotes: 5

user379888
user379888

Reputation:

You can use it using the pattern attribute. You can generate a pattern from this link.

HTML:

<form>
  <h2>Phone Number Validation</h2>
  <label for="phonenum">Phone Number (format: xxxx-xxx-xxxx):</label><br/>
  <input id="phonenum" type="tel" pattern="^\d{4}-\d{3}-\d{4}$" required >

  <input type="submit" value="Submit">
  <p class="p">Demo by Agbonghama Collins. <a href="http://www.sitepoint.com/client-side-form-validation-html5/">See article</a>.</p>
</form>

CSS:

input[type="tel"] {
  border: 1px solid #ddd;
  padding: 4px 8px;
}
input[type="tel"]:focus {
  border: 1px solid #000;
}

input[type="submit"] {
  font-weight: bold;
  padding: 4px 8px;
  border:1px solid #000;
  background: #3b5998;
  color:#fff;
}

form {
  width: 50%;
  margin: 0 auto;
}

.p {
  padding-top: 30px;
}

Fiddle here.

Upvotes: 8

Luiz Gon&#231;alves
Luiz Gon&#231;alves

Reputation: 547

Change type="text" to type="number".

Also you can use Masks: https://igorescobar.github.io/jQuery-Mask-Plugin/

Upvotes: 0

Jinav Shah
Jinav Shah

Reputation: 79

    <input type="text" name="num" data-validation="number" 
    data-validation-allowing="negative,number" input name="color" 
    data-validation="number" datavalidation-ignore="$" required="required" class="form-control" 
    id="phone_no" placeholder="Phone Number" maxlength="6" pattern="\d*">

While button is being clicked, it won't allow it to submit it, until it is 6 digit and numerical.

Upvotes: 1

Related Questions