jquery之WTForms 与 Jquery Form Plugin 耦合时如何显示验证错误_编程设计

我正在尝试合并 WTForms与 jQuery Form Plugin .对于后者，我绑定(bind)表单并提供回调函数。另一方面，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 %}

请您参考如下方法:

我在 this answer 中描述了验证 ajax 表单的一般实现。 .这是在输入表单字段时(即在提交表单之前)验证表单字段的上下文，但同样的想法也适用于最终提交表单时。

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

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

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

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

希望对您有所帮助。