title: Why twitter bootstrap input:focus:invalid:focus triggered when novalidate is used?
body: <p>I have a form in my web app that requires the user to input a url. I've decided to leave the validation for the url input to server for now, but wanted to retain the perks of using the HTML5 url type for mobile device input.</p>
  
  <p>Here's my form code:</p>
  
  <pre><code>    &lt;form method="post" action="." required novalidate&gt;{% csrf_token %}
          &lt;fieldset&gt;
              &lt;legend&gt;{% trans "Add Resource Link" %}&lt;/legend&gt;
              &lt;div class="well"&gt;
                  &lt;label for="id_url"&gt;&lt;strong&gt;{% trans "Web Address" %}&lt;/strong&gt;&lt;/label&gt;
                  {% if form.url.errors %}
                      &lt;div class="alert alert-error"&gt;{{ form.url.errors }}&lt;/div&gt;
                  {% endif %}    
                  &lt;div class="input-prepend"&gt;
                      &lt;span class="add-on"&gt;&lt;i class="icon-link"&gt;&lt;/i&gt;&lt;/span&gt;
                      &lt;input id="id_url" name="url" type="url" placeholder="http://www.example.com"&gt;                        
                  &lt;/div&gt;
                  &lt;div&gt;   
                      &lt;button type="submit" class="btn btn-primary"&gt;{% trans "Add Link" %}&lt;/button&gt;
                  &lt;/div&gt;                    
              &lt;/div&gt;
          &lt;/fieldset&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>While using novalidate on the form allows me to submit invalid urls that are caught by the server validation, the input:focus:invalid:focus is still be triggered and appears to be using the default HTML5 regex validation for urls which is one or more letters followed by a colon. </p>
  
  <p>Screen capture of the form with no input:</p>
  
  <p><img src="https://i.stack.imgur.com/OMzSf.png" alt="Screen capture of the form with no input"></p>
  
  <p>Screen capture of the form with invalid input:</p>
  
  <p><img src="https://i.stack.imgur.com/Dz8jC.png" alt="Screen capture of the form with invalid input"></p>
  
  <p>Screen capture of the form with valid input according to the default regex for url validation in HTML5 (I think?):</p>
  
  <p><img src="https://i.stack.imgur.com/9beZy.png" alt="Screen capture of the form with valid input according to the default regex for url validation in HTML5 (I think?)"></p>
  
  <p>My question is why is the input:focus:invalid:focus being triggered when novalidate is being used? I assume this may be expected behavior that I don't understand.. What is the recommended best practice for ensuring that input:focus:invalid:focus is not triggered - i.e. I don't want any input validation on the client side - at least not at this time. I'm testing on linux (Ubuntu 12.04) using Chrome version 25.0.1364.172.  </p>