为什么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>