Question

我正在尝试将WTForms与jQuery Form Plugin结合起来。有了后者，我绑定表单并提供回调函数。另一方面，WTForms必须在服务器端执行验证工作。

我的问题是：当form.validate()产生False时，不会显示错误。

我的问题：对于WTForms与JQuery结合的情况，如何从服务器端请求验证，如果验证失败，显示错误消息，该怎么可能？

我认为库wtforms-parsleyjs本来是一个不错的选择，但并非所有WTForms字段都受支持（例如FormField不支持）。

可能this question包含答案，但没有足够的细节让我更进一步。

提前感谢任何提示。

这是我的 Flask View ：

@app.route('/test', methods=['GET', 'POST'])
def get_form():
        form = BForm(request.form)
        D=form.uu.entries
        if request.method == 'POST' and form.validate():
            cl1=[]
            for entry in D:
                cl1.append(entry.ff.data)
            a=0
            for L, v in enumerate(cl1):
                a+=v
            jresult={"result":float(a)}
            return jsonify(jresult)
        return render_template('test.html', form=form)

此处表单

field = DecimalField(default=0.0, validators=[NumberRange(min=0, max=2)])
text = TextField()

class AForm(Form):
    ff=field
    tt=text

class BForm(Form):
    uu=FieldList(FormField(AForm), min_entries=2)

此处为模板

<script type=text/javascript>
    $(document).ready(function() {
        $("#result").html('?');
        // bind 'myForm' and provide a simple callback function 
        $('#myForm').ajaxForm(function(response) {
            restxt=$('#result').html(response.result) 
        });
    });
</script>

<form action="/test" id="myForm" method=post>
        {% for field in form.uu %}
            {{ render_field(field.ff) }}
        {% endfor %}        
    <input class="button" type="submit" value="calc">
    <span id="result">?</span>
</form>

更新：关注@Miguel评论，这里是render_field宏：

{% macro render_field(field) %}
  {{ field(class_='form-control', **kwargs)|safe }}
  {% if field.errors %}
    {% for error in field.errors %}
      <span style="color: black;"> {{error}} </span>
    {% endfor %}
  {% endif %}
{% endmacro %}

Answer 1

我已经描述了在this answer中验证ajax表单的一般实现。这是在输入表单字段时（即在表单提交之前）验证表单字段，但在表单最终提交时也适用相同的想法。

您的render_field()宏被写入服务器端渲染字段错误。但是您的POST请求不会重新呈现表单，它只返回计算结果。你真的永远不会给服务器重新渲染或更新表格。

最简单的解决方案是不使用ajax表单提交。然后，当您收到POST请求时，您将进行验证，并将新页面返回给客户端。要呈现该页面，您将传递表单（其中将包含任何验证错误）和计算结果。

如果您想继续提交ajax，那么您需要找出一种策略来更新客户端中的表单。以下是一些想法：

您的JSON响应必须包含任何验证错误，因此您需要将它们从表单对象复制到JSON字典中。
您的ajax成功处理程序不仅需要更新#result的HTML，还需要在适当的位置将任何验证错误插入DOM。
您的render_field()宏无法呈现错误消息，因为在此宏运行时，错误尚未知晓。相反，您应该创建可以容纳错误的空和不可见元素，这些元素将由客户端在ajax提交回调中填充。

我希望这会有所帮助。

当WTForms与Jquery Form Plugin结合使用时，如何显示验证错误？

1 个答案: