在提交之前驗證WTForm

Question

離開字段之後但在提交之前是否可以驗證WTForm字段？ 例如，輸入用戶名後，在用戶單擊提交之前，會驗證該字段是否可用並顯示覆選標記。

Answer 1

更改字段時，執行檢查並更改相鄰節點中的文本。有些東西可以直接在瀏覽器中驗證。要根據服務器上的數據進行驗證，請使用JavaScript將請求發送到檢查數據並返回JSON響應的視圖。

@app.route('/username-exists', methods=['POST']) 
def username_exists(): 
    username = request.form['username'] 
    exists = check_if_user_exists(username) 
    return jsonify(exists=exists) 

<input id='username' name='username'> 
<p id='username-status'></p> 

var username_input = $('#username'); 
var username_status = $('#username-status'); 

$('#username').on('focusout', function() { 
    $.post(
     "{{ url_for('username_exists') }}", 
     { 
      username: username_input.val() 
     }, 
     function (data) { 
      username_status.text(data.exists ? '✔️' : ''); 
     } 
    ); 
}); 

這個例子使用jQuery的，但概念是不針對任何庫。

或者，將整個表單發佈到僅驗證字段的單獨視圖，然後return jsonify(form.errors)並在瀏覽器中對其進行操作。代碼基本上與上述相同，並有一些額外的邏輯將錯誤消息放在正確的字段旁邊。

記得還是驗證數據提交表單的時候，因爲請求可以在瀏覽器之外進行，與其他