在 WTForms 的 StringField 对象中添加 Id 字段答案

【问题标题】：Add Id field in StringField object in WTForms在 WTForms 的 StringField 对象中添加 Id 字段
【发布时间】：2018-12-22 14:09:00
【问题描述】：

我正在使用 Flask 和 WTForms 在 Python 中创建一个表单，并使用 HTML 在前端显示该表单。

我想添加验证并使用 JavaScript 在客户端进行网络调用，问题是我无法在客户端本身的特定字段中获取值，因为没有提供给 String 字段的 id。

我们怎样才能做到这一点？如果那不可能，那么替代方法是什么

class Add_user_form(Form):
    name = StringField('Name',[validators.Length(min = 1, max=50)])
    email_address = StringField('Email Address',[validators.Length(min = 1, max=50)])
    user_password = PasswordField('Password',    [validators.DataRequired(),validators.EqualTo('confirm', message='Passwords must match')])
    confirm = PasswordField('Confirm Password')

HTML代码是

{% block body %}
    <h1>Registration</h1>
    {% from "includes/formhelpers.html" import render_field %}
    <form  method = 'POST'>
        <div class="form-group">
        {{render_field(form.name,class_= 'form-control')}}
        </div>
        <div class="form-group">
        {{render_field(form.email_address,class_= 'form-control')}}
        </div>
        <div class="form-group">
        {{render_field(form.user_password,class_ = 'form-control')}}
        </div>
        <div class="form-group">
        {{render_field(form.confirm,class_ = 'form-control')}}
        </div>
        <p><input type ="submit" class = "btn-primary" value="Submit" onclick="myfunction()"></p>
    </form>
{% endblock %}

【问题讨论】：

“没有提供给字符串字段的 id”是什么意思？ WTForms 字段总是呈现id，除非你的render_field 宏有干扰？
在上面的例子中你能告诉我如何调用 document.getElementById("demo") 因为我需要从表单中提取值、验证、创建一个 json 并进行网络调用
表单或html中没有名为demo的字段，所以这是不可能的。
所以你说如果我调用 var value = document.getElementById("name");我会得到在名称字段中输入的文本吗？

标签： javascript python flask flask-wtforms wtforms

【解决方案1】：

如果您打开 html 页面并检查元素，您会看到已经为该元素定义了一个名称和 id，与您在 StringField 中的变量名称相同。

这意味着您可以像这样从输入字段中找到文本：

var name = document.getElementById('name').value

【讨论】：