Javascript 为什么使用novalidate时会触发twitter引导输入:focus:invalid:focus?

Javascript 为什么使用novalidate时会触发twitter引导输入:focus:invalid:focus?,javascript,html,validation,twitter-bootstrap,Javascript,Html,Validation,Twitter Bootstrap,我的web应用程序中有一个表单,要求用户输入url。我决定暂时将url输入的验证工作留给服务器,但我想保留在移动设备输入中使用HTML5URL类型的特权 这是我的表格代码: <form method="post" action="." required novalidate>{% csrf_token %} <fieldset> <legend>{% trans "Add Resource Link" %}<

我的web应用程序中有一个表单,要求用户输入url。我决定暂时将url输入的验证工作留给服务器,但我想保留在移动设备输入中使用HTML5URL类型的特权

这是我的表格代码:

    <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>
{%csrf\u令牌%}
{%trans“添加资源链接”%}
{%trans“网址”%}
{%if form.url.errors%}
{{form.url.errors}
{%endif%}
{%trans“添加链接”%}
虽然在表单上使用novalidate允许我提交服务器验证捕获的无效URL,但仍然会触发输入:focus:invalid:focus,并且似乎对URL使用默认的HTML5正则表达式验证,即一个或多个字母后跟冒号

表单的屏幕截图(无输入):

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

根据HTML5中url验证的默认正则表达式,使用有效输入的表单屏幕截图(我想?):


我的问题是,为什么在使用诺瓦利达时会触发输入:focus:invalid:focus?我想这可能是我不理解的预期行为。。建议的最佳实践是什么,以确保输入:焦点:无效:焦点未被触发-即,我不希望在客户端进行任何输入验证-至少目前不需要。我正在使用Chrome版本25.0.1364.172在linux(Ubuntu 12.04)上进行测试

novalidate
属性和
:无效的
伪类之间没有链接

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

    novalidate和formnovalidate内容属性是布尔属性。如果存在,则表明在提交期间不验证表格

  • 当触发
    无效
    事件时,将应用伪类。它可以,并且在表单提交之前会发生多次(每次触发
    input
    事件)

您可以重置引导样式以避免获得
:无效的
样式,同时保持HTML5的优势:

表单[novalidate]输入:焦点:无效,
表单[novalidate]文本区域:焦点:无效,
表单[novalidate]选择:焦点:无效{
颜色:#555;
边框颜色:rgba(82168 2360.8);;
-webkit盒阴影:
插图0 1px 1px rgba(0,0,0,0.075),
08pxRGBA(82162360.6);
-moz盒阴影:
插图0 1px 1px rgba(0,0,0,0.075),
08pxRGBA(82162360.6);
框阴影:
插图0 1px 1px rgba(0,0,0,0.075),
08pxRGBA(82162360.6);
}

带有验证的网址
添加链接
未经验证的网址
添加链接

我对此不确定,但我一直认为,
novalidate
只是建议提交表格时不需要输入有效信息,而不是在您决定询问时提供有关其有效性的信息。