miguelgrinberg / turbo-flask

Integration of Hotwire's Turbo library with Flask.
MIT License
301 stars 35 forks source link

Turbo + Flask WTF without reloading #35

Closed aguileraGit closed 2 months ago

aguileraGit commented 2 years ago

Hello. I'm trying to use a form to customize something and not simply grabbing some information. I am using Flask WTF to do the validation. This includes passing error messages back to the webpage if the form fails validation.

Is there a way to pass the form errors back to the webpage without reloading (render_template)?

from flask import Flask
from flask_wtf import FlaskForm
from wtforms.validators import DataRequired
from turbo_flask import Turbo

class BlockForm(FlaskForm):
    blockLetter = StringField('Block Letter',\
                                [validators.InputRequired('Please enter a single letter'),
                                validators.Length(min=1, max=1, message='Please enter a single letter')
                                ])

    fontSize = IntegerField('Block Font Size (points)',\
                                [validators.InputRequired('Font size in points'),
                                 validators.NumberRange(min=validationDefaults.fontSizeMin,
                                                        max=validationDefaults.fontSizeMax,
                                                        message=validationDefaults.fontSizeErrorMsg)
                                                        ],
                                 default='32')

@app.route('/blockCustomizer', methods = ['GET', 'POST'])
def blockCustomizer():
    form = BlockForm()

    if request.method == 'POST':

         if form.validate_on_submit() == False:
             if turbo.can_stream():
                 #Validation Failed - from should return form errors without reloading
                 return turbo.stream(turbo.update(render_template('test.html', form=form), target='form'))
             else:
                print('No Streaming')

         else:
             #Validation Passed - Prevent page from reloading.
             return turbo.stream(turbo.update(render_template('test.html', form=form), target='form'))
{% for message in form.blockLetter.errors %}
     <div>{{ message }}</div>
{% endfor %}

{% for message in form.fontSize.errors %}
     <div>{{ message }}</div>
{% endfor %}
miguelgrinberg commented 2 years ago

This is really up to you to design. When there is a validation error you are returning a complete re-rendered form. If you want to update only parts of the form, then you should reply with updates for those parts that you want to change.