WTForms DataRequired验证器检测空格却不显示错误问题咨询

问题详情 #

开发Flask应用时，使用WTForms的DataRequired验证器确保字段为必填项：

• 当字段完全为空时，验证器会正常显示错误信息；
• 但仅输入空格（或空白字符）时，表单验证不通过，页面停留在原页面，却不显示任何错误提示。
  新建测试项目后问题依然存在，疑惑这是DataRequired的正常行为，还是WTForms的Bug？

使用版本 #

• Flask 2.1.1
• Flask-WT 1.0.0
• WTForms 3.0.0

代码片段 #

WTForm定义 #

class AddUserForm(FlaskForm):
    """Class for adding a form to template"""

    first_name = StringField("first name ", validators=[DataRequired()])
    last_name = StringField(
        "Last Name",
        validators=[DataRequired()],
    )
    desc = StringField(
        "Description",
        validators=[DataRequired()],
        widget=TextArea(),
    )
    age = IntegerField(
        "Age",
        validators=[
            DataRequired(),
            NumberRange(min=1, message="Age must be at least 1"),
        ],
        default=1,
    )
    tag_1 = StringField(validators=[DataRequired()])
    tag_2 = StringField(validators=[DataRequired()])
    submit = SubmitField("Save")

视图函数 #

from flask import Flask, redirect, render_template, request, url_for
from .form_models import AddUserForm
import os

app = Flask(__name__)


SECRET_KEY = os.urandom(32)
app.config["SECRET_KEY"] = SECRET_KEY


@app.route("/add", methods=["GET", "POST"])
def add_faq():
    
    form = AddUserForm()

    if form.validate_on_submit():
        print(form.data.items())

    return render_template("add_user.html", form=form)

模板代码 #

<form style="padding-bottom: 50px;" action="" method="POST" role="form" class="form" autocomplete="off">
    {{ form.hidden_tag() }}

    {{ wtf.form_field(form.first_name) }}
    {{ wtf.form_field(form.last_name , placeholder='Last name') }}
    {{ wtf.form_field(form.age , placeholder='age') }}
    {{ wtf.form_field(form.desc ,
    placeholder='Description of user', rows='20') }}

    <div class="form-group  required"><label class="form-control-label">Tags:</label>

        <input class="form-control" placeholder="Tag 1" required type="text" style="margin-bottom:5px;"
            id="tag_1" name="tag_1" {% if form.tag_1.data is not none %} value="{{ form.tag_1.data }}" {%
            endif %}>
        <input class="form-control" placeholder="Tag 2" required type="text" style="margin-bottom:5px;"
            id="tag_2" name="tag_2" {% if form.tag_2.data is not none %} value="{{ form.tag_2.data }}" {%
            endif %}>

        <input type="hidden" value="2" id="total_tags">
        <div id="new_tags"></div>

        <input class="btn btn-secondary add" type="button" value="+ Tag"
            style="margin-right:5px; margin-bottom:5px;">
        <input class="btn btn-secondary remove" type="button" value="- Tag"
            style="margin-right:5px; margin-bottom:5px;">
    </div>

    {{ wtf.form_field(form.submit) }}
</form>

已尝试的解决方法 #

• 使用InputValidator：无法检测仅输入空格的情况；
• 给DataRequired添加自定义提示信息：仅在字段完全为空时生效，输入空格时仍无提示。

解答 #

这是DataRequired的正常行为 #

DataRequired验证器的核心逻辑是检查字段值是否为真值（Truthy Value）：

• 完全为空的字段（空字符串""）属于假值，会触发错误提示；
• 由空格组成的字符串（如" "）属于真值（非空字符串），不会触发DataRequired的验证错误，但会导致后续验证（比如IntegerField的类型验证）失败，或表单整体validate_on_submit()返回False，从而停留在原页面。

另外，模板中tag_1和tag_2是手动渲染的输入框，没有使用wtf.form_field宏，即使字段验证出错，错误信息也不会自动显示，这也是你看不到提示的原因之一。

解决方案 #

1. 补充验证规则，禁止仅输入空格

可以通过两种方式实现：

• 方式一：使用正则验证器
  引入Regexp验证器，匹配至少包含一个非空白字符的内容：

  from wtforms.validators import DataRequired, Regexp
  
  first_name = StringField("first name ", validators=[
      DataRequired(),
      Regexp(r'^\s*\S+\s*$', message="不能仅输入空格")
  ])
  

  正则^\s*\S+\s*$允许前后有空格，但必须包含至少一个非空白字符。

• 方式二：自定义验证器
  编写自定义函数，检查字段值去除前后空格后是否为空：

  from wtforms.validators import DataRequired, ValidationError
  
  def non_blank(form, field):
      if not field.data.strip():
          raise ValidationError("不能仅输入空格")
  
  # 字段中使用
  first_name = StringField("first name ", validators=[DataRequired(), non_blank])
  

2. 手动渲染字段时显示错误信息

对于模板中手动渲染的tag_1和tag_2，需要在输入框下方添加错误信息渲染逻辑：

<input class="form-control" placeholder="Tag 1" required type="text" style="margin-bottom:5px;"
    id="tag_1" name="tag_1" {% if form.tag_1.data is not none %} value="{{ form.tag_1.data }}" {% endif %}>
{% if form.tag_1.errors %}
    {% for error in form.tag_1.errors %}
        <span class="text-danger mt-1 d-block">{{ error }}</span>
    {% endfor %}
{% endif %}

<input class="form-control" placeholder="Tag 2" required type="text" style="margin-bottom:5px;"
    id="tag_2" name="tag_2" {% if form.tag_2.data is not none %} value="{{ form.tag_2.data }}" {% endif %}>
{% if form.tag_2.errors %}
    {% for error in form.tag_2.errors %}
        <span class="text-danger mt-1 d-block">{{ error }}</span>
    {% endfor %}
{% endif %}

内容的提问来源于stack exchange，提问作者Carlos S