5

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

Screen capture of the form with invalid 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?):

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.

4

1 回答 1

10

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>

于 2013-12-20T14:15:57.147 回答