如何在JQuery中访问WTForm字段?

时间:2015-04-30 09:43:41

标签: jquery flask-wtforms

我正在尝试使用Flask创建一个网站,并使用WTForms进行注册页面,如下所示:

views.py:

@app.route('/register', methods=('GET', 'POST'))
def register():

    form = RegistrationForm()
    if form.validate_on_submit():
        user = User(form.password.data)
        form.populate_obj(user)
        db.session.add(user)
        db.session.commit()
        login_user(user)
        return redirect(url_for('index'))
    return render_template('register.html', title='Register', form=form, user=current_user)

register.html:

{% extends "base.html" %}
{%- block content -%}
{% import "formhelpers.html" as fields %}
<div id="login_container">
    <div id="register_title"><p>Register</p></div>
    <form method="post" action="{{ url_for('register') }}">
        {{ form.hidden_tag() }}
        {{ fields.render(form.first_name, placeholder="Firstname") }} <br/>
        {{ fields.render(form.last_name, placeholder="Surname") }} <br/>
        {{ fields.render(form.email, placeholder="Your email") }} <br/>
        {{ fields.render(form.password, placeholder="Password") }} <br/>
        {{ fields.render(form.confirm, placeholder="Confirm password") }} <br/>
      <p>
      <input class="btn" type="submit" value="register"></a>
      </p>
    </form>
</div>

{% - endblock - %}

如果密码不匹配,我想要为用户输入错误消息,因为他们输入。我知道你可以在jquery中做这样的事情:

$('.password-field').keyup(function() {
    var p1 = $(this).val();
    var p2 = $(.confirm-field).val();
    if (p1 != p2) {
        $('.error-message').show();
    }

但我不知道如何访问JQuery中的WTForm字段。有什么想法吗?

1 个答案:

答案 0 :(得分:0)

这可能有用,我们有渲染的HTML /表单字段,我们可以帮助您更轻松地编写代码。

var p1 = $("#login_container input[type=password]:nth-child(1)");
var p2 = $("#login_container input[type=password]:nth-child(2)");
$(p1).keyup(function() {
   if ($(p1).val() != $(p2).val()) {
      $('.error-message').show();
   }
}