提出する前にWTFormを確認する

Question

フィールドを離れると、提出する前にWTFormフィールドを検証できますか？ たとえば、ユーザ名を入力すると、そのフィールドが有効であるかどうかが確認され、ユーザがsubmitをクリックする前にチェックマークが表示されます。

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)と入力し、ブラウザで何かを実行してください。コードは、エラーメッセージを正しいフィールドの隣に置くための余分なロジックと、上記と基本的に同じです。

要求は、他の