Как добавить Bootstrap Проверка в WTForms

Question

Я использую WTForms в сочетании с Flask, и я хотел бы интегрировать Bootstrap Проверка формы для ошибок в моей форме. У меня есть базовая c форма входа в систему, примерно такая:

class LoginForm(FlaskForm):
    """Login form."""

    email = EmailField(
        "Email Address", validators=[DataRequired(), Email(), Length(min=6, max=40)]
    )
    password = PasswordField(
        "Password", validators=[DataRequired()]
    )

    def __init__(self, *args, **kwargs):
        """Create instance."""
        super(LoginForm, self).__init__(*args, **kwargs)
        self.user = None

    def validate(self):
        """Validate the form."""
        initial_validation = super(LoginForm, self).validate()
        if not initial_validation:
            return False

        self.user = User.query.filter_by(email=self.email.data).first()
        if not self.user:
            self.email.errors.append("Unknown email address!")
            return False

        if not self.user.check_password(self.password.data):
            self.password.errors.append("Invalid password!")
            return False

        if not self.user.verified:
            self.email.errors.append("Please verify your email address!")
            return False
        return True

Мой логин. html шаблон настроен так:

<form method="POST" action="{{ url_for('public.login') }}" role="form">
                  {{ form.csrf_token }}
                  <div class="form-group">
                    {{ form.email.label(class_="form-control-label") }}
                    <div class="input-group input-group-merge">
                      <div class="input-group-prepend">
                        <span class="input-group-text"><i class="fas fa-user"></i></span>
                      </div>
                      {{ form.email(placeholder="name@example.com", class_="form-control") }}
                    </div>
                  </div>
                  <div class="form-group mb-4">
                    <div class="d-flex align-items-center justify-content-between">
                      <div>
                        {{ form.password.label(class_="form-control-label") }}
                      </div>
                      <div class="mb-2">
                        <a href="{{ url_for('public.recover') }}" class="small text-muted text-underline--dashed border-primary">Lost password?</a>
                      </div>
                    </div>
                    <div class="input-group input-group-merge">
                      <div class="input-group-prepend">
                        <span class="input-group-text"><i class="fas fa-key"></i></span>
                      </div>
                      {{ form.password(placeholder="Password", class_="form-control") }}
                      <div class="input-group-append" onclick="togglePassword()">
                        <span class="input-group-text">
                          <i class="fas fa-eye"></i>
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="row mt-4">
                    <div class="col-md-auto mt-1 mb-2" align="center">
                      <button type="submit" class="btn btn-sm btn-primary btn-icon rounded-pill">
                        <span class="btn-inner--text">Sign in</span>
                        <span class="btn-inner--icon"><i class="fas fa-long-arrow-alt-right"></i></span>
                      </button>
                    </div>
                    <div class="col-md-auto text-center mt-2">
                      <p class="text-secondary-dark">or</p>
                      </div>
                    <div class="col-md-auto" align="center">
                      <button type="button" class="btn btn-md btn-secondary btn-icon-only">
                          <span class="btn-inner--icon">
                              <i class="fab fa-google"></i>
                          </span>
                      </button>

                      <button type="button" class="btn btn-md btn-secondary btn-icon-only">
                          <span class="btn-inner--icon">
                              <i class="fab fa-linkedin"></i>
                          </span>
                      </button>
                    </div>
                  </div>
                </form>

Я хотел бы отобразить ошибки, которые я проверяю с помощью WTForms, но я не уверен, как изменить класс исходного элемента формы на is-invalid или is-valid, и как создать метки для каждой ошибки. Я изучил макросы, но, похоже, они тоже не могут изменять элемент формы.

Может ли кто-нибудь указать мне правильное направление?

Answer 1

Я столкнулся с той же проблемой, и я хотел избежать использования любого третьего пакета (flask - bootstrap), и я пришел к этому простому решению:

<div class="form-group">
  {{ form.email.label }} <span class="text-danger">*</span>


  {{ form.email(class="form-control" + (" is-invalid" if form.email.errors else "") + " rounded-0 shadow-none", **{"placeholder": "Your Email", "aria-describedby": "emailHelp", "autocomplete": "off"}) }}


  <small id="emailHelp" class="form-text text-muted">We'll never share your data with anyone else.</small>

  {% if form.email.errors %}
    {% for error in form.email.errors %}
      <div class="invalid-feedback">{{ error }}</div>
    {% endfor %}
  {% endif %}
</div>

хитрость заключается в том, чтобы используйте простое троичное выражение в сочетании с конкатенацией строк.

Answer 2

При рендеринге шаблона с использованием render_template передайте класс is-valid всем элементам, которые вы хотите. Используйте это

class = '{{email_valid_class}} all other classes here'

Затем в python return render_template('login.html',email_valid_class='is-valid')