Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use WTForms in Ajax validation?

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

like image 201
swdev Avatar asked Nov 11 '13 04:11

swdev


2 Answers

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.

like image 190
Miguel Avatar answered Oct 08 '22 03:10

Miguel


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.
like image 39
Peter Lada Avatar answered Oct 08 '22 03:10

Peter Lada