使用 Flask 防止输入类型 url 默认行为

Question

我在表单中输入类型 url，我试图在同一页面中获取验证错误列表，但我希望表单首先将数据发送到服务器，然后呈现错误列表但是当输入类型设置为 url 并且我输入一些其他文本时它显示一个弹出窗口并说输入有效 Url 它在将任何数据发送到服务器之前在客户端执行我可以将它与 js 和 preventDefault 一起使用，但是如何使用 Flask

克服这种默认行为

这是我的代码

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>

使用 Flask 防止输入类型 url 默认行为

Prevent input type url default behavior using Flask

python

forms

validation

flask

wtforms