Tại sao đầu vào twitter bootstrap: focus: invalid: focus được kích hoạt khi novalidate được sử dụng?

Question

Tôi có một biểu mẫu trong ứng dụng web yêu cầu người dùng nhập url. Tôi đã quyết định để lại xác nhận cho đầu vào url cho máy chủ cho bây giờ, nhưng muốn giữ lại các đặc quyền của việc sử dụng loại url HTML5 cho đầu vào thiết bị di động.

Dưới đây là mẫu mã của tôi:

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

Trong khi sử dụng novalidate về hình thức cho phép tôi gửi url không hợp lệ được đánh bắt bởi các máy chủ xác nhận, đầu vào: tập trung: không hợp lệ: tập trung vẫn đang được kích hoạt và xuất hiện để sử dụng xác thực regex HTML5 mặc định cho các url là một hoặc nhiều chữ cái theo sau dấu hai chấm.

Chụp màn hình của mẫu không có đầu vào:

Chụp màn hình của mẫu với đầu vào không hợp lệ:

Chụp màn hình của mẫu với đầu vào hợp lệ theo regex mặc định để xác thực url trong HTML5 (Tôi nghĩ vậy?):

Câu hỏi của tôi là tại sao đầu vào: tiêu điểm: không hợp lệ: tiêu điểm được kích hoạt khi sử dụng novalidate? Tôi cho rằng đây có thể là hành vi mong đợi mà tôi không hiểu .. Thực hành tốt nhất được đề nghị để đảm bảo đầu vào là gì: focus: invalid: focus không được kích hoạt - nghĩa là tôi không muốn bất kỳ xác thực đầu vào nào ở phía máy khách - tại ít nhất là không vào thời điểm này. Tôi đang thử nghiệm trên Linux (Ubuntu 12.04) sử dụng phiên bản Chrome 25.0.1364.172.

Answer 1

Không có liên kết giữa thuộc tính novalidate và :invalid lớp giả.

• Các novalidate thuộc tính chỉ được sử dụng vào mẫu trình:

  Các novalidate và nội dung formnovalidate thuộc tính là thuộc tính boolean. Nếu có, họ cho biết rằng biểu mẫu không được xác thực trong quá trình gửi.

• Các :invalid pseudo-class được áp dụng khi sự kiện invalid được kích hoạt. Nó có thể, và nó sẽ xảy ra nhiều lần trước khi gửi biểu mẫu (mỗi khi sự kiện input được kích hoạt).

Bạn có thể thiết lập lại Bootstrap phong cách để tránh bị :invalid phong cách, trong khi vẫn giữ HTML5 ưu điểm:

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>