電話番号検証ブートストラップ3

Question

電話番号を入力してフォームを送信できる人のために、私のウェブサイトにフォームを作成しようとしています。しかし、数字の代わりにアルファベットを入力すると、それでも受け入れられます。とにかく、Bootstrap 3を使って電話の検証を確認できますか？

は、ここに私のコード

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

Answer 1

あなたはpattern属性を使用してそれを使用することができます。 thisリンクからパターンを生成できます。

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; 
} 

フィドルhere。

Answer 2

ブートストラップは、任意のフォーム検証システムを提供していないです。

ちょっとした工夫をして数字だけを許可したり、利用可能なJavaScriptプラグイン（たとえばhttp://formvalidation.io/）のいずれかを使用できます。

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

Answer 3

<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*"> 

ボタンをクリックしている間、それは6桁の数値になるまで、それは、それはそれを提出することはできません。

Answer 4

type="text"~type="number"となります。

また、あなたはマスクを使用することができます。https://igorescobar.github.io/jQuery-Mask-Plugin/