Обработка ошибок WTForms с бесшовной настройкой пользователя

Question

Я новичок в WTForms, и из того, что я узнал до сих пор, я считаю ошибку проверки правильности немного сложной.

Во-первых, я не могу реализовать собственный HTML <input required >;

Во-вторых, когда форма не прошла проверку, я должен пересмотреть шаблон страницы, на которой находится форма, и если моя форма помещена внизу страницы, пользователь увидит страницу «обновлена» и не имеет понятия что происходит.

Есть ли у кого-нибудь предложения по интеграции WTForms более плавно? Любые комментарии, ресурсы, URL-адреса, образцы кода приветствуются, спасибо!

Вот некоторые из моих родственных кодов:

# /forms.py 
from wtforms import Form, BooleanField, StringField, PasswordField, validators 

class RegistrationForm(Form): 
    email = StringField('Email Address', [ 
     validators.required(), 
     validators.Email(message='Please enter a valid email address'), 
     validators.length(min=6, max=35) 
    ]) 
    password = PasswordField('New Password', [ 
     validators.required(), 
     validators.DataRequired(), 
     validators.length(min=6, max=35) 
    ]) 

---

# /views.py 
from flask import Flask, Blueprint, flash, render_template, redirect, request, url_for 
from forms import RegistrationForm, LoginForm 

app = Flask(__name__) 

@app.route('/', methods=['GET', 'POST']) 
def index(): 
    form = RegistrationForm() 
    context = { 
     "form": form 
    } 
    if request.method == 'POST' and form.validate(): 
     submitted_form = request.form 
     return redirect('/welcome') 
    else: 
     return render_template('form.html', context = context) 

---

# /form.html 
<form class="form" action="" method="POST" name="register"> 
    {% for field_name, field_errors in context.reg_form.errors|dictsort if field_errors %} 
    {% for err in field_errors %} 
     <li class="error">{{ context.reg_form[field_name].label }}: {{ err }}</li> 
    {% endfor %} 
    {% endfor %} 

    <ul class="form-fields center"> 
    <li class="form-field"> 
    {{ context.form.email(class='email', placeholder='email') }} 
    </li> 
    <li class="form-field"> 
    {{ context.form.password(class='password', placeholder='password') }} 
    </li> 
    </ul> 
</form> 

Answer 1

Насколько я понимаю, WTForm всегда придется обновить страницу, чтобы показать ошибки , Я работал над этим, позволяя интерфейсу проверить форму для меня. Не знаю, возможно ли это на вашем деле, но я использовал AngularJS, чтобы сделать трюк. Это довольно просто, не требуется ни одной строки кода, если вам нужна простая проверка, например формат электронной почты, длина пароля и т. Д., Все это выполняется с помощью атрибутов html. Вы даже можете отключить кнопку отправки, пока ваша форма не будет готова. Проверьте это CodePen

Вы можете прокручивать снизу страницы, используя это, если по-прежнему необходимо:

var objDiv =  document.getElementById("your_div"); 
objDiv.scrollTop = objDiv.scrollHeight 

Если вам нужно более надежное решение, вы можете придумать API, который возвращает истину или false в любое поле, которое вы хотите проверить. Затем сделайте угловой запрос http, чтобы проверить его, когда вы печатаете, таким образом, вы на 100% уверены, что вы сформируете, будет проверять. Но в зависимости от того, что вы проверяете, вы можете открыть дыру в безопасности. Существует отличная запись в блоге об этом на Ng-Newsletter

Answer 2

Для лучшего опыта работы с формами в Колба вы должны использовать Flask-WTF extension. Установите его:

$ pip install flask-wtf 

импортировать его

from flask.ext.wtf import Form 

и использовать его вместе с wtforms модулем.

.py файл:

from flask.ext.wtf import Form 
from wtforms import StringField, SubmitField 
from wtforms.validators import Required 

class NameForm(Form): 
    name = StringField('What is your name?', validators=[Required()]) 
    submit = SubmitField('Submit') 

.html файл:

<form method="POST"> 
{{ form.name.label }} {{ form.name() }} 
{{ form.submit() }} #this is your submit button 
</form>