How can I show realtime text analysis of a Django form Textarea (models.TextField)?
<p>OK, so I have a model class <code>Recipe</code> and a form class <code>AddRecipeForm</code> that is based on <code>Recipe</code> (<code>via forms.ModelForm</code>).</p>

<p>The form shows up in my html template and works, but I want to implement a special type of form validation. Basically, I want to do some text processing on some big text input fields as a user types his / her ingredients / directions.</p>

<p>I have code that figures out where all the amounts (numbers) in the ingredient text are, and identifies and classifies all the units (e.g. 'lbs.', 'gr', etc...). --> I'd love to be able to basically have a text-box right by the side of the form in <code>add_recipe.html</code> that performs this text processing (via highlighting, bold, etc) in real time.</p>

<p>However, I'm really not sure how to do it. I've been reading about doing real-time form validation via <code>AJAX</code>, <code>jquery</code>, 'django channels', or maybe just <code>django</code>'s <code>ModelForm.clean()</code> method, but I'm not sure which would be best or where to start. Any pointers / suggestions would be awesome!</p>

<p>Here's my (simplified) code:</p>

<h2>models.py</h2>

<pre><code>class Recipe(models.Model):
    recipe_name = models.CharField(max_length=128, default='')
    description = models.CharField(max_length=1024)
    ingredients_text = models.TextField(max_length=2048*2)
    instructions_text = models.TextField(max_length=2048*4)
</code></pre>

<h2>forms.py</h2>

<pre><code>class AddRecipeForm(forms.ModelForm):
    class Meta:
        model = Recipe
        fields = '__all__'
</code></pre>

<h2>views.py</h2>

<pre><code>def add_recipe(request):

    if request.method == "POST":
        add_recipe_form = AddRecipeForm(request.POST)
        if add_recipe_form.is_valid():
            recipe = add_recipe_form.save()
            recipe.save()
            return HttpResponseRedirect('/recipes/detail/{}/'.format(recipe.id))
        else:
            return HttpResponse('Invalid values :( Try again?')
    else:
        add_recipe_form = AddRecipeForm()

    context = {
        'add_recipe_form': add_recipe_form,
    }

    return render(request, 'home/add_recipe.html', context)
</code></pre>

<h2>home/templates/home/add_recipe.py (html template)</h2>

<p>sidenote: I'm using the <a href="http://materializecss.com/" rel="nofollow" title="materialize">materialize</a> framework, so I'm doing forms with a little helper so the CSS doesn't conflict with django - I can stop using it if need be though...</p>

<pre><code>{% extends "home/index.html" %}
{% block content %}
{% load materialize %}
    &lt;h2&gt; Add a Recipe &lt;/h2&gt;
    &lt;form method="post" enctype="multipart/form-data"&gt;
        {% csrf_token %}
    &lt;div class="row"&gt;
        &lt;p&gt;{{add_recipe_form.ingredients_text|as_material:"s12 m6"}}&lt;/p&gt;
        &lt;div class="col s12 m6 textbox"&gt;  TODO (realtime validation textbox)  &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
        &lt;p&gt;{{add_recipe_form.instructions_text|as_material:"s12 m6"}}&lt;/p&gt;
        &lt;div class="col s12 m6 textbox"&gt; TODO (realtime validation textbox) &lt;/div&gt;
    &lt;/div&gt;

        &lt;input type="submit" value="Submit" class="waves-effect waves-light btn"/&gt;
    &lt;/form&gt;
{% endblock %}
</code></pre>

<p>Don't get Django's Form class involved and don't worry about django-channels. You just need to setup a simple API that takes a JSON of whatever is in your text field and returns a result of processed text. JavaScript would be responsible for calling the API via AJAX and doing something with the response.</p>

<p>It's not 100% clear what you're doing with the processed text but if you're replacing the words "two and a half" with "2 1/2", I could see the server responding with a key value pair of {"two and a half": "2 1/2"} and allowing JavaScript to find and replace that text.</p>

jquery python django forms