如何使用龙卷风在前端显示错误

Question

Here is my python file for the contact form of the website. the main file is getting the data and sending it to the database.

 #main.py
    class next(tornado.web.RequestHandler):
    def get(self):
        self.render("contact.html")
    async def post(self):
        form = contact(self.request.arguments)
        name_ = form.data["name"]
        phone_ = form.data["phone"]
        email_ = form.data["email"]
        message_ = form.data["message"]
        image_ = form.data["pic"]
        print(name_, phone_, email_, message_, image_)

        try:

            dbsend = TestModel.create(name=name_, phone=phone_, email=email_,message=message_,image=image_)
            dbsend.save()
            print('done')
            self.render("contact.html")
        except:
            print('not done')

this is the file where I think all validation code belongs

validation.py

from wtforms import *
from wtforms_tornado import Form
class contact(Form):
    name= StringField('name',[validators.required()])
    phone = StringField('phone', [validators.Length(min=4, message="too Short")])
    email = StringField('email', [validators.Length(min=4, message="too Short")])
    message = StringField('message', [validators.Length(min=4, message="too Short")])
    pic = StringField('pic', [validators.Length(min=4, message="too Short")])

This is the HTML page containing the form.

contact.html

 <div class="row">
    <div class="col-lg-8 mb-4">
      <h3>Send us a Message</h3>
      <form name="sent" action="/contact" method="post" id="cForm" >
        <div class="control-group form-group">
          <div class="controls">
            <label>Full Name:</label>
            <input type="text"  name="name" >
            <p class="help-block"></p>
          </div>
        </div>
        <div class="control-group form-group">
          <div class="controls">
            <label>Phone Number:</label>
            <input  name="phone" >
          </div>
        </div>

        <div class=" ">
          <div class="">
            <label>Email Address:</label>
            <input   name="email">
          </div>
        </div>
        <div class="control-group form-group">
          <div class="controls">
            <label>Message:</label>
            <textarea rows="10" cols="100"  name="message" ></textarea>
          </div>
        </div>
        <div class="control-group form-group">
          <div class="controls">
            <label>Image:</label>
            <input type="file" name="pic" accept="image/*">
          </div>
        </div>
        <div id="success"></div>
        <!-- For success/fail messages -->
        <button type="submit" class="btn btn-primary" id="sendMessageButton">Send Message</button>
      </form>

    </div>

How can I put validations on email phone etc and show the error on the front end?

Answer 1

As it all stated it WTForms documentation, you can use validate() method of a form-instance to run validators. All errors would be in the form.errors attribute. You can insert errors messages into a HTML page by using a templating engine.