なぜtwitterのブートストラップ入力ですか？focus：無効：novalidateを使用するとフォーカスがトリガされますか？

Question

私はWebアプリケーションに、ユーザーがURLを入力する必要があるフォームを持っています。私は、サーバーへのURL入力の検証を残しておくことにしましたが、モバイルデバイスの入力用にHTML5 URLタイプを使用するという特典を保持したいと考えていました。

ここに私のフォームのコードがあります：焦点：：無効：

<form method="post" action="." required novalidate>{% csrf_token %} 
     <fieldset> 
      <legend>{% trans "Add Resource Link" %}</legend> 
      <div class="well"> 
       <label for="id_url"><strong>{% trans "Web Address" %}</strong></label> 
       {% if form.url.errors %} 
        <div class="alert alert-error">{{ form.url.errors }}</div> 
       {% endif %}  
       <div class="input-prepend"> 
        <span class="add-on"><i class="icon-link"></i></span> 
        <input id="id_url" name="url" type="url" placeholder="http://www.example.com">       
       </div> 
       <div> 
        <button type="submit" class="btn btn-primary">{% trans "Add Link" %}</button> 
       </div>      
      </div> 
     </fieldset> 
    </form> 

フォームにNOVALIDATEを使用している間は、無効なサーバーの検証によってキャッチされたURL、入力を提出する私を可能に焦点がまだトリガされていると表示されます1つまたは複数の文字の後にコロンが続くURLに対して、デフォルトのHTML5正規表現検証を使用すること。無入力とフォームの

スクリーンキャプチャ：無効な入力を持つフォームの

スクリーンキャプチャ：有効な入力を持つフォームの

スクリーン・キャプチャーに応じてHTML5のURL検証のデフォルトの正規表現（私は思う？）：

なぜ私は入力ですか？フォーカス：無効：フォーカスは、novalidateが使用されているときにトリガされますか？フォーカス：無効：フォーカスがトリガーされない - つまり、クライアント側で入力検証をしたくない - ということで、これは私が理解できないと予想される動作であると思われます。少なくともこの時点ではありません。私は、Linuxバージョン25.0.1364.172を使ってLinux（Ubuntu 12.04）をテストしています。

Answer 1

novalidate属性と:invalid疑似クラスの間にはリンクがありません。

• novalidate属性は、フォーム送信にをのみ使用されます。

  NOVALIDATEとformnovalidateコンテンツの属性はブール属性です。存在する場合、フォームは提出中に検証されないことを示します。

• invalidイベントがトリガされたとき:invalid擬似クラスが適用されます。可能ですが、フォーム提出の前に何度も発生します（毎回inputイベントが発生します）。

HTML5の利点を維持しながら、あなたは、:invalidスタイルを避けるためにブートストラップスタイルをリセットすることができます：

form[novalidate] input:focus:invalid, 
 
form[novalidate] textarea:focus:invalid, 
 
form[novalidate] select:focus:invalid { 
 
    color: #555; 
 
    border-color: rgba(82, 168, 236, 0.8);; 
 
    -webkit-box-shadow: 
 
     inset 0 1px 1px rgba(0, 0, 0, 0.075), 
 
     0 0 8px rgba(82, 168, 236, 0.6); 
 
    -moz-box-shadow: 
 
     inset 0 1px 1px rgba(0, 0, 0, 0.075), 
 
     0 0 8px rgba(82, 168, 236, 0.6); 
 
    box-shadow: 
 
     inset 0 1px 1px rgba(0, 0, 0, 0.075), 
 
     0 0 8px rgba(82, 168, 236, 0.6); 
 
}

<script src="http://netdna.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script> 
 
<link href="http://netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<form method="post" action="." required> 
 
    <fieldset> 
 
     <div class="well"> 
 
      <label for="id_url"><strong>Web Address With Validation</strong></label> 
 
      <div class="input-prepend"> 
 
       <span class="add-on"><i class="icon-th"></i></span> 
 
       <input id="id_url" name="url" type="url" placeholder="http://www.example.com"/> 
 
      </div> 
 
      <div> 
 
       <button type="submit" class="btn btn-primary">Add Link</button> 
 
      </div>      
 
     </div> 
 
    </fieldset> 
 
</form> 
 
<form method="post" action="." required novalidate> 
 
    <fieldset> 
 
     <div class="well"> 
 
      <label for="id_url"><strong>Web Address Without Validation</strong></label> 
 
      <div class="input-prepend"> 
 
       <span class="add-on"><i class="icon-th"></i></span> 
 
       <input id="id_url" name="url" type="url" placeholder="http://www.example.com"/> 
 
      </div> 
 
      <div> 
 
       <button type="submit" class="btn btn-primary">Add Link</button> 
 
      </div>      
 
     </div> 
 
    </fieldset> 
 
</form>