Perché input di bootstrap twitter: focus: non valido: focus attivato quando si utilizza Novalidate?

Question

Ho un modulo nella mia app Web che richiede all'utente di inserire un URL. Ho deciso di lasciare la convalida per l'input dell'URL al server per ora, ma volevo mantenere i vantaggi dell'utilizzo del tipo di URL HTML5 per l'input del dispositivo mobile.

Ecco il mio codice del modulo:

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

Durante l'utilizzo novalidate sul modulo mi permette di inviare gli URL non validi che vengono catturati dalla convalida del server, l'ingresso: attenzione: non valida: messa a fuoco è ancora essere attivato e appare per utilizzare la convalida regex HTML5 predefinita per gli URL che è una o più lettere seguite da due punti.

cattura dello schermo di forma senza ingresso:

cattura dello schermo del modulo con input non valido:

cattura dello schermo del modulo con input valido in base alle l'espressione regolare di default per la convalida url in HTML5 (credo?):

mia domanda è perché è l'ingresso: attenzione: non valida: la messa a fuoco viene attivato quando viene utilizzato novalidate? Presumo che questo possa essere un comportamento previsto che non capisco .. Qual è la best practice raccomandata per garantire quell'input: focus: invalid: focus non attivato - cioè non voglio alcuna validazione di input dal lato client - at almeno non in questo momento. Sto testando su linux (Ubuntu 12.04) usando la versione 25.0.1364.172 di Chrome.

Answer 1

Non esiste alcun collegamento tra l'attributo novalidate e la pseudo-classe :invalid.

• L'attributo novalidate viene utilizzato solo sul modulo di presentazione:

  Il NOVALIDATE e contenuti formnovalidate attributi sono attributi booleani. Se presenti, indicano che il modulo non deve essere convalidato durante la presentazione.

• Il :invalid pseudo-classe viene applicato quando viene attivato l'evento invalid. Può, e si verificherà molte volte prima dell'invio del modulo (ogni volta che viene attivato l'evento input).

Si potrebbe ripristinare lo stile Bootstrap per evitare :invalid stile, pur mantenendo HTML5 vantaggi:

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>