Dlaczego wprowadzanie początkowe Twittera: fokus: nieprawidłowa: fokus wyzwalany, gdy używany jest brak weryfikacji?

Question

Mam formularz w mojej aplikacji internetowej, który wymaga podania adresu URL przez użytkownika. Zdecydowałem się na razie pominąć weryfikację adresu URL na serwerze, ale chciałem zachować korzyści z używania adresu URL HTML5 do wprowadzania danych na urządzeniu mobilnym.

Oto mój kod forma:

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

Podczas korzystania novalidate na formularzu pozwala mi przedstawić nieprawidłowe adresy URL, które są objęte walidacji serwerów, wejście: Zbliżenie: nieprawidłowy: ostrość jest nadal być uruchamiane i wydaje używać domyślnej metody sprawdzania poprawności wyrażenia HTML5 dla adresów URL, która jest jedną lub więcej literami, po których następuje dwukropek.

Zrzut ekranu formularza, bez wejścia:

Zrzut ekranu formy z błędnych danych wejściowych:

wychwytywania ekranu formularza z prawidłowymi wejściowych zgodnie domyślne wyrażenie regularne sprawdzania poprawności adresu URL w HTML5 (chyba?):

Moje pytanie brzmi: dlaczego dane wejściowe: fokus: nieprawidłowe: fokus jest wyzwalany, gdy używany jest brak wartości sprawdzającej? Zakładam, że może to być oczekiwane zachowanie, którego nie rozumiem. Jaka jest zalecana najlepsza praktyka dla zapewnienia, że ​​input: focus: invalid: focus nie jest uruchamiany - tzn. Nie chcę żadnej weryfikacji danych wejściowych po stronie klienta - w przynajmniej nie w tym czasie. Testuję na Linuksie (Ubuntu 12.04) używając Chrome w wersji 25.0.1364.172.

Answer 1

Nie ma połączenia między atrybutem novalidate, a pseudoklasą :invalid.

• Atrybut novalidate służy tylko na przesyłanie formularza:

  novalidate i formnovalidate treści atrybuty są boolean atrybuty. Jeśli są obecne, wskazują, że formularz nie ma być zatwierdzony podczas składania.

• :invalid pseudoklasa stosuje się, gdy zdarzenie invalid jest uruchomiony. Może i wystąpi wiele razy przed przesłaniem formularza (za każdym razem, gdy zostanie wywołane zdarzenie input).

Można zresetować styl Bootstrap aby uniknąć :invalid stylu, zachowując HTML5 zalety:

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>