WTForms for efficient forms validation and rendering in Flask

Blog post - nagasudhir.blogspot.com/2022/...
Basic forms in Flask - • Forms in flask with fr...
Macros in Flask - • macros in flask jinja ...
Flask Playlist - • Flask Web development ...
In this video, we will learn how to use WTForms for easy forms validation and redndering
Setup Python Development Environment - • Install python and VS ...
Table of contents - nagasudhir.blogspot.com/2020/...
Please subscribe, like and share this video
00:00 - Intro
00:56 - Install WTForms
01:17 - The Example
01:37 - Basic Server Setup
02:46 - Form Object
03:28 - StringField
04:57 - Render Form in Template
07:34 - HTML attributes in form fields
08:43 - Handle Form submission
11:04 - IntegerField
12:30 - DateTimeField
14:17 - Extract Form Data
15:22 - PasswordField
16:14 - BooleanField
17:10 - TextAreaField
18:04 - SelectField
19:40 - Review the generated Form
20:28 - validate and display errors
22:41 - macros for form fields
24:10 - style the errors with css
24:50 - custom form validation
26:47 - Outro
#flask #wtforms #server #web #forms #jinja #jinja_macro #dev #tutorial #learning #beginners #pythonforbeginners #taming_python

[@Niko_Trades_And_Lounge]

How is it that there is always an Indian tutorial with specifically what I need and always with little to no subs :D ! Great work my man , love indian tutorials !

[@learningsoftwareskills]

Hi thanks for the encouraging feedback. RUclips should focus on better auto generation of subtitles for Indian accent 😂

[@Niko_Trades_And_Lounge]

@@learningsoftwareskills haha I meant you have little subscribers , no need for subtitles ur English is great

[@learningsoftwareskills]

@@Niko_Trades_And_Lounge thanks

[@khurramwali1982]

Great work i am very easy to understand. Thanks

[@learningsoftwareskills]

Thanks for the nice comments 👍

[@biancafiedalan2455]

thank u so much man. there are very little resources abt learning the newer version of flask. this rly helped me understand it more

[@learningsoftwareskills]

Hi, thanks a lot for the encouraging feedback. Means a lot to me, cheers 👍

[@TheEducatedandproud]

He is very good. I learned alot with this video.

[@learningsoftwareskills]

Thanks man👍🙏

[@vigneshshetty1812]

Thanks a lot🙏🙏🙏 Please keep up the great work, loved the video.

[@learningsoftwareskills]

Thanks for the awesome feedback👍🙏

[@lahcenkhweb1912]

thanks man the tutorial is great

[@learningsoftwareskills]

Thank you 👍

[@raauger]

Thank you! A very thorough explanation of WTForms. One question: How can I change the color of the server side validation error messages to red? I tried styling the ul errors class, but that did not work.

[@learningsoftwareskills]

Hi, please refer to the blogpost at nagasudhir.blogspot.com/2022/07/forms-in-flask-with-wtforms.html
The source code can be found in "Rendering each form field" section. Please cross check with your code.
Hope this helps, cheers 👍

[@kartikprajapati3592]

Nice bro its really help me
Thanks a lot bro

[@learningsoftwareskills]

You are welcome bro 👍

[@claudiapol19]

How can I format the datefield as format= '%d-%m-%Y'? I change it but in my post request it gets sent as Y m d and doesn't validate

[@dannyezechukwu1175]

Exactly what I was looking for!
is the default behavior for the fields to remain populated when the form is submitted?

[@learningsoftwareskills]

Yes, when the form is submitted, the form object will have the input data in it. That is why when we render the form in scenarios like validation failure, the data submitted by the user is rendered in the page
Hope this helps, cheers 👍

[@mihaelacostea5783]

How do you make the form reset its fields (i mean fields become empty) after repfreshing or after error is thrown? in my case after i fill in the fields I get errors but all the values I have input are still there.

[@learningsoftwareskills]

Hi, you have to reset the fields in the server side and render the form in case of errors of you want such behaviour.
Instead of clicking the browser reload button, you can click enter in the URL address input, then the form should be empty again
Hope this helps, Cheers 👍

[@khurramwali1982]

use JavaScript

[@MA-tv1dz]

hey i had a problem whenever i click on submit a page 404 error shows and i couldn't understand the reason behind this !!! this is my function
@app.route('/registration', methods=['GET', 'POST'])
def registration_page():
form = RegisterForm()
if form.validate_on_submit():
hashed_password = generate_password_hash(form.password1.data, method='sha256')
user_to_create = User(username=form.username.data,
email_address=form.email_address.data,
password_hash=form.password1.data)

db.session.add(user_to_create)
db.session.commit()
flash('Thanks for registering')
return redirect(url_for('home_page'))
if form.errors != {}: #If there are not errors from the validations
for err_msg in form.errors.values():
print(f'There was an error with creating a user: {err_msg}')
return render_template('registration.html', form=form)
and this is in the registration.html

{{form.hidden_tag()}}
{{ form.csrf_token }}

Sign Up
Please fill in this form to create an account.

{{ form.username.label() }}
{{ form.username(class="form-control", placeholder="User Name") }}
{{ form.email_address.label() }}
{{ form.email_address(class="form-control", placeholder="Email Address") }}
{{ form.password1.label() }}
{{ form.password1(class="form-control", placeholder="Password") }}
{{ form.password2.label() }}
{{ form.password2(class="form-control", placeholder="Confirm Password") }}


{{ form.submit(class="btn btn-lg btn-block btn-primary",style="background-color: #5072A7;") }}

[@learningsoftwareskills]

Hi, I have could not simulate the scenario you mentioned since User, RegisterForm classes are not available.
However, I noticed that the form action parameter in "registration.html" is "/registration_page" but there is no route for that URL in the server. I think if you set action parameter to "/registration", your POST request can go to the write place. Infact, I suggest you remove the action parameter of the form tag in registration.html page
Hope this helps, Cheers👍

[@gaganashetty7738]

What can be done if I need to link my mySQL db to Wtforms to check duplicate entries

[@learningsoftwareskills]

Hi, you can enforce uniqueness constraints on the database table. While pushing the form data at the backend, the database will automatically throw error and that error can be displayed to the front-end as form validation error.
Hope this helps, Cheers 👍

[@scratchcode]

1) How do you get the email and password data using wtform using EmailField and PasswordField,
It always return none ?
2) My form validates on refresh and when the form is filled and the validates() method is triggered the form returns false

[@learningsoftwareskills]

Hi, please see the example source code in the section named "Server-side Form handling" in the blogpost for this video at nagasudhir.blogspot.com/2022/07/forms-in-flask-with-wtforms.html
May be your issues will be addressed with this source code
Hope this helps, Cheers👍