为啥使用 novalidate 时会触发 twitter bootstrap input:focus:invalid:focus？

Posted 2023-02-22

【中文标题】为啥使用 novalidate 时会触发 twitter bootstrap input:focus:invalid:focus？

【英文标题】：Why twitter bootstrap input:focus:invalid:focus triggered when novalidate is used?为什么使用 novalidate 时会触发 twitter bootstrap input:focus:invalid:focus？

【发布时间】：2013-06-01 12:44:15

【问题描述】：

我的网络应用程序中有一个表单，要求用户输入网址。我决定暂时将 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，但仍会触发 input:focus:invalid:focus 并且似乎正在使用默认的 HTML5 正则表达式验证 url，这是一个或多个字母后跟一个冒号。

没有输入的表单截图：

输入无效的表单截图：

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

我的问题是为什么在使用 novalidate 时会触发 input:focus:invalid:focus ？我认为这可能是我不理解的预期行为。确保不触发 input:focus:invalid:focus 的推荐最佳实践是什么 - 即我不希望在客户端进行任何输入验证 - 在至少现在不是。我正在使用 Chrome 版本 25.0.1364.172 在 linux (Ubuntu 12.04) 上进行测试。

【问题讨论】：

对此我不确定，但我一直认为novalidate 只是表明输入不需要有效才能提交表单，并且如果您决定询问，请勿提供有关其有效性的信息。

【参考方案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>