爲什麼twitter自舉輸入：焦點：無效：使用novalidate時觸發焦點？

Question

我在我的web應用程序中有一個表單，它要求用戶輸入一個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讓我提交了由服務器驗證，輸入捕獲無效網址：重點：無效：關注焦點依然被觸發，並出現要使用默認的HTML5正則表達式驗證URL是一個或多個字母后跟一個冒號。具有根據有效的輸入形式的

抓屏：與無效的輸入形式的

抓屏：無輸入的形式的

抓屏默認的正則表達式驗證HTML5中的網址（我認爲？）：

我的問題是爲什麼輸入：focus：invalid：當使用novalidate時會觸發焦點？我認爲這可能是預期的行爲，我不明白..什麼是建議的最佳做法，以確保輸入：焦點：無效：焦點不會觸發 - 即我不希望任何輸入驗證在客戶端 - 在至少不是在這個時候。我正在使用Chrome版本25.0.1364.172在Linux（Ubuntu 12.04）上進行測試。

Answer 1

novalidate屬性和:invalid僞類之間沒有關聯。

• 的novalidate屬性僅用於上表單提交：

  的NOVALIDATE和formnovalidate內容屬性是布爾屬性。如果存在，他們表示表單在提交期間不會被驗證。

• 的:invalid僞類在觸發事件invalid施加。它可以，並且會在表單提交之前發生多次（每次觸發事件input）。

你可以重新引導風格，以避免讓:invalid風格，同時保持HTML5的優點：

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>