5

Web アプリに、ユーザーが URL を入力する必要があるフォームがあります。今のところ、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 は引き続きトリガーされ、1 つ以上の文字である URL に対してデフォルトの HTML5 正規表現検証を使用しているように見えます。コロンが続きます。

入力のないフォームのスクリーン キャプチャ:

入力のないフォームのスクリーン キャプチャ

無効な入力を含むフォームのスクリーン キャプチャ:

無効な入力を含むフォームのスクリーン キャプチャ

HTML5 での URL 検証のデフォルトの正規表現による有効な入力を含むフォームのスクリーン キャプチャ (だと思いますか?):

HTML5 の URL 検証用のデフォルトの正規表現による有効な入力を含むフォームのスクリーン キャプチャ (だと思いますか?)

私の質問は、novalidate が使用されているときに input:focus:invalid:focus がトリガーされるのはなぜですか? これは、私が理解していない予想される動作である可能性があると思います.. input:focus:invalid:focus がトリガーされないようにするための推奨されるベストプラクティスは何ですか - つまり、クライアント側で入力検証を行いたくない - で少なくとも現時点ではありません。Chrome バージョン 25.0.1364.172 を使用して Linux (Ubuntu 12.04) でテストしています。

4

1 に答える 1

10

novalidate属性と:invalid疑似クラスの間にリンクはありません。

  • この属性は、フォームnovalidateの送信時にのみ使用されます:

    novalidate および formnovalidate コンテンツ属性はブール属性です。存在する場合、送信中にフォームが検証されないことを示します。

  • イベントがトリガーされると、:invalid疑似クラスが適用されます。それは可能であり、フォーム送信前に何度も発生します (イベントがトリガーされるinvalidたびに)。input

:invalidHTML5 の利点を維持しながら、スタイルを取得しないように Bootstrap スタイルをリセットできます。

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 に答える