Flaskを使用した入力タイプのURLのデフォルト動作の防止

Question

フォームに入力タイプのURLがあり、同じページで検証エラーのリストを取得しようとしていますが、まずフォームをサーバーに送信してから、エラーリストが入力タイプがurlに設定されていて、他のテキストを入力するとポップアップが表示され、有効なURLを入力してください サーバにデータを送信する前にクライアント側で行います jsとpreventDefaultしかし、どのように私はここでフラスコ

を使用して、このデフォルトの動作を克服することができますことは、私のコードは

from flask_wtf import Form 
from wtforms.fields import StringField 
from flask.ext.wtf.html5 import URLField 
from wtforms.validators import DataRequired, url 

class BookmarkForm(Form): 
    url = URLField('url', validators = [DataRequired(), url()]) 
    description = StringField('description') 

ですメインPYファイル

@app.route('/add', methods = ['GET', 'POST']) 
def add(): 
    form = BookmarkForm() 
    if form.validate_on_submit(): 
     url = form.url.data 
     description = form.description.data 
     store_bookmark(url, description) 
     flash('stored "{}"'.format(description)) 
     return redirect(url_for('index')) 
    return render_template('add.html', form = form) 

とテンプレート

<form id='addUrl' action='' method='post' 
{% if form.url.errors %} class ='error' 
{% endif %}> 
    {{ form.hidden_tag() }} 
    <p>Please enter your bookmark here</p> 
    {{ form.url(size = 50) }} 
    <p>Please enter additional description</p> 
    {{ form.description(size = 50) }} 
    <ul> 
     {% for error in form.url.errors %} 
      <li>{{ error }}</li> 
     {% endfor %} 
    </ul> 
    <button type='submit'>Submit</button> 
</form> 

Answer 1

それはHTML5のブラウザのサポートに依存し、それは、クライアント側の検証を引き起こし、サーバに渡さにデータを防ぎます。フォームにnovalidateタグを追加することで、HTML5 URLフィールドのデフォルトの動作を克服することができます。

あなたのテンプレートは、この

<form id='addUrl' action='' method='post' novalidate 
{% if form.url.errors %} class ='error' 
{% endif %}> 
    {{ form.hidden_tag() }} 
    <p>Please enter your bookmark here</p> 
    {{ form.url(size = 50) }} 
    <p>Please enter additional description</p> 
    {{ form.description(size = 50) }} 
    {# <input type='text' name='url' required> #} 
    <ul> 
     {% for error in form.url.errors %} 
      <li>{{ error }}</li> 
     {% endfor %} 
    </ul> 
    <button type='submit'>Submit</button> 
</form>