Why twitter bootstrap input:focus:invalid:focus triggered when novalidate is used?

Question

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.

Here's my form code:

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

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.

Screen capture of the form with no input:

Screen capture of the form with invalid input:

Screen capture of the form with valid input according to the default regex for url validation in HTML5 (I think?):

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.

Answer 1

There's no link between novalidate attribute, and :invalid pseudo-class.

• The novalidate attribute is only used on form submission :

  The novalidate and formnovalidate content attributes are boolean attributes. If present, they indicate that the form is not to be validated during submission.

• The :invalid pseudo-class is applied when the invalid event is triggered. It can, and it will occur many times before the form submission (each time input event is triggered).

You could reset Bootstrap style to avoid getting :invalid style, while keeping HTML5 advantages :

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>