如何自定义flask-wtf表单中的字段

Question

there. I defined a class called LoginForm:

class LoginForm(FlaskForm):
    email = StringField('Email', validators=[DataRequired(), Length(5, 64), Email()])
    password = PasswordField('Password', validators=[DataRequired()])
    remember_me = BooleanField('Remember me')
    submit = SubmitField('Log In')

Then I render it in the templates login.html :

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{{ wtf.quick_form(form) }}

It looks like above:

And I think it is a little bit ugly. So, I render the fields in the normal way:

<form action="" method="POST" role="form" class="form">
    {{ form.hidden_tag() }} {{ wtf.form_errors(form, hiddens="only") }}
    <div class="form-group  required">
        <label class="control-label" for="email">Email</label>
        {{ form.email(class="form-control",id="email",required="required",type="text",value="",placeholder="Enter email") }}
    </div>
    <div class="form-group  required">
        <label class="control-label" for="password">Password</label>
        {{ form.password(class="form-control",id="password",required="required",type="password",value="",placeholder="Enter email") }}
    </div>
    <div class="checkbox">
        <label>
            <input id="remember_me" name="remember_me" type="checkbox" value="y"> Remember me
        </label>
    </div>
    {{ form.submit(class="btn btn-success btn-block") }}
    <a href="{{ url_for('auth.register') }}" class="btn btn-danger btn-block" role="button">Register</a>
</form>

It agrees with me now. But I met a problem: When I click the green login button, it does not validate the data(like the format of a email address). How should I solve this problem?

Answer 1

First I thought that it is not validating. Thank @BurhanKhalid for reminding me. It's just not showing the errors. I changed the code and it works.

{% if form.email.errors %}
    <div class="form-group  required has-error">
        {{ form.email(class="form-control",id="email",required='required',type="text",value="",placeholder="Enter email") }}
        {% for error in form.email.errors %}
        <p class="help-block">{{ error }}</p>
        {% endfor %}
{% else %}
    <div class="form-group  required">
    {{ form.email(class="form-control",id="email",required='required',type="text",value="",placeholder="Enter email") }}
{% endif %}
    </div>