Cameron A Cameron A - 3 months ago 26
Python Question

Prevent input type url default behavior using Flask

I have input type url in a form and Im trying to get the list of validation errors in the same page, but I want the form first send the data to the server and then render the error list but when the input type is set to url and I enter some other text It shows a popup and say Enter valid Url
It does it on the client side before sending any data to the server
I can use it with js and preventDefault but how can I overcome this default behavior using Flask

Here is my code

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')


the main py file

@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)


and the template

<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

You can overcome that default behavior of the HTML5 URL field by adding the tag novalidate to your form.

Your template will look like this

<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>
Comments