为什么twitter bootstrap输入：focus：invalid：当使用novalidate时触发焦点？

Question

我的网络应用中有一个表单，要求用户输入网址。我现在决定将url输入的验证留给服务器，但是希望保留使用HTML5 url类型进行移动设备输入的好处。

这是我的表单代码：

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

虽然在表单上使用novalidate允许我提交服务器验证捕获的无效URL，但输入：focus：invalid：仍然会触发焦点并且似乎正在使用默认的HTML5正则表达式验证或更多字母后跟冒号。

没有输入的表单的屏幕截图：

输入无效的表单的屏幕截图：

根据HTML5中url验证的默认正则表达式，有效输入的表单的屏幕截图（我想？）：

我的问题是为什么输入：focus：invalid：当使用novalidate时焦点被触发？我认为这可能是我不理解的预期行为。确保输入的建议最佳做法是什么：焦点：无效：焦点未被触发 - 即我不想在客户端进行任何输入验证 - 在至少目前还没有。我正在使用Chrome版本25.0.1364.172在linux（Ubuntu 12.04）上进行测试。

Answer 1

novalidate属性和:invalid伪类之间没有链接。

• novalidate 属性仅在表单提交时使用 ：

    

  novalidate和formnovalidate内容属性是布尔属性。如果存在，则表明在提交过程中不对表单进行验证。

• 触发invalid事件时会应用 :invalid 伪类。它可以，并且会在表单提交之前多次出现（每次触发input事件时）。

您可以重置Bootstrap样式以避免获得:invalid样式，同时保持HTML5优势：

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>