WTForms與Jquery Form Plugin結合使用時如何顯示驗證錯誤？

Question

我正在嘗試將WTForms與jQuery Form Plugin結合使用。 對於后者，我綁定了表單並提供了回調函數。 另一方面，WTForms必須在服務器端執行驗證工作。

我的問題是：當form.validate()產生False ，沒有顯示錯誤。

我的問題 ：在WTForms與JQuery結合的情況下，如何從服務器端請求驗證，並在驗證失敗的情況下顯示錯誤消息？

我認為庫wtforms-parsleyjs將是一個不錯的選擇，但並非所有WTForms字段都受支持（例如不支持FormField ）。

這個問題可能包含答案，但沒有足夠的細節讓我進一步介紹。

預先感謝您的任何提示。

這是我的燒瓶視圖 ：

@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

我已經描述了在此答案中驗證ajax表單的一般實現。 這是在輸入表單字段時（即在提交表單之前）驗證表單字段的上下文，但是在最終提交表單時也適用相同的想法。

您的render_field()宏被編寫為在服務器端渲染字段錯誤。 但是您的POST請求不會重新呈現表單，它只會返回計算結果。 您實際上永遠不會給服務器重新渲染或更新表單的機會。

最簡單的解決方案是不使用ajax提交表單。 然后，當您收到POST請求時，您將進行驗證，然后將新頁面返回給客戶端。 要呈現該頁面，您將傳遞表單（表單中將包含任何驗證錯誤）和計算結果。

如果要繼續提交Ajax，則需要找出一種策略來更新客戶端中的表單。 這里有一些想法：

• 您的JSON響應必須包含任何驗證錯誤，因此您需要將其從表單對象復制到JSON字典中。
• 您的ajax成功處理程序不僅需要更新#result的HTML，而且還需要在適當的位置將任何驗證錯誤插入DOM。
• 您的render_field()宏無法呈現錯誤消息，因為在此宏運行render_field()不知道錯誤。 相反，您應該只創建可以容納錯誤的空元素和不可見元素，這些元素將由客戶端在ajax提交回調中填充。

我希望這有幫助。