How to use WTForms in Ajax validation?

Question

I accustomed of using WTForms by means of Flask-WTF in my flask application. Doing server side validation is trivial. But how do I leverage this server validation to become a field level, ajax, client side validation? So, when user tab to another input fields, my application can directly goes on validating it and give validation warning/info/error.

I haven't found a resource in the internet yet

Answer 1

A possible solution is as follows:

• On the client side you attach a handler to the blur event in all the controls in the form.

• Each time the blur event occurs you run a Javascript function that collects the values of all the fields and then submits them as an ajax POST request.

• On the server the view function that handles this ajax POST request instantiates the Flask-WTF form and then validates it. Any errors that resulted from validation are collected into a dictionary that is then sent in a JSON response back to the client.

  For example, a successful validation could return the following JSON:

  { 
      "errors": {}
  }
  

  A response that includes errors could be:

  {
      "errors": { 
          "name": "This field is required",
          "age": "Enter a numeric value between 0 and 99"
      }
  }
  

• The client gets this JSON response and applies the required changes to the DOM to expose the errors.

• If you get a new blur event before the previous one returned you will probably want to abort the pending ajax POST and start a new one with updated field values. You should have only one pending validation request at a time to avoid race conditions.

Answer 2

A great question. This is what we do (flask backend, jquery frontend):

• use jquery.forms plugin to ajax forms. Pretty solid mature code. Shortcoming, cannot send json encoded data, only form-urlencoded. Receives plain or json data.
• use wtfroms for form validation. Very mature codebase.
• tried to use wtforms-json for accepting json, very screwy problems.