Back
Mar 06, 2010

Ajax form validation

Vladimir Sidorenko
Vladimir Sidorenko

There was a task to submit form with ajax, with server side validation of course. Obvious solution is to do validation and return json with erros.

I didn't like idea of writing separate view for validation and then inserting errors in form html on client side. Especially since I already had a generic template for django form with errors display.

Task

User will see process like this:

  • User clicks 'edit' near article block
  • article is replaced with form
  • in case there are validation errors - they are shown above the form fields
  • in case there are no errors - form is replaced by article html

Solution

Server will return piece of html that will replace part of page with article or form (with errors if needed). Actually this sentence is the most important part of this blog post. Implementation is very simple and straightforward.

Well actually the fact that you can return parts of html from server is also not new idea at all. It's just only now I finally understood that using this technique you can create more complicated things than modal window or tabs

Implementation

views.py

def edit_new(request, new_id):
        new = get_object_or_404()
        if request.method == 'POST':
            form = NewsForm(request.POST, instance=new)
            if form.is_valid():
                new = form.save()
                return render_to_response('include/new.html', dict(new=new))
        else:
            form = NewsForm(instance=new)
        return render_to_response('include/form.html', dict(form=form, new=new))

form.html

This html will replace article block on 'edit' button click. Javascript should be moved to separate file of course.

<script type="text/javascript">
        function submitAndLoad(input) {
            $.ajax({
                url: "{% url edit_new new.id %}",
                data: $(input).parent().serialize(), // форма
                type: "post",
                dataType: "html",
                success: function(data) {
                    $(input).parent().parent().html(data); // article block
                }
            });
            return false;
        };
    </script>
    <form>
        {{ form }}
        <input type="submit" value="Save" onclick="return submitAndLoad(this);"/>
    </form>

news_list.html

<script type="text/javascript">
        function editNew(id) {
            $("#new-" + id).load("{% url edit_new new.id %}");
            return false;
        }
    </script>

    <!-- ... -->

    <div id="new-{{ new.id }}">
        {% include "news/new.html" %}
    </div>
    <a onclick="return editNew({{ new.id }});" href="#">Edit</a>

Code can be cleaned up of course, I just wanted to show the idea.

Update

I'm translating this article almost five years after it was originally written and of course now it seems very childish :) Now we have angular and ajax forms are implemented a little differently. Still this old solution is not all that bad. I'd still replace one thing here - it's better to return json with html from server instead of just html.

More thoughts

May 12, 2010Technology
Twitter API, OAuth and decorators

In my current project I had a task to use twitter API. Twitter uses OAuth for authentication, which is pretty dreary. To avoid fiddling with it all the time, I've moved authentication to decorator. If key is available - nothing happens, just view is launched as usual. It's convenient that there's no need for additional twitter settings in user profile. Code is in article.

Vladimir Sidorenko
Vladimir Sidorenko
Oct 01, 2017Technology
RESTful API Design: Best Practices

We've collected some useful tips regarding REST aimed for beginner developers.

Vladimir Sidorenko
Vladimir Sidorenko
May 10, 2018Technology
How to Build a Cloud-Based Leads Management System for Universities

Lead management is an important part of the marketing strategy of every company of any size. Besides automating various business processes, privately-held organizations should consider implementing an IT solution that would help them manage their leads. So, how should you make a web-based leads management system for a University in order to significantly increase sales?

Vladimir Sidorenko
Vladimir Sidorenko
Jul 01, 2010Technology
Overriding QuerySet in Django

As you know, model managers can be overriden in Django. It's convenient to add custom filtration method there:Article.objects.published()Article.objects.old()But these custom methods cannot be chained:Article.objects.published().old()In this article I'll explain how this can be solved.

Vladimir Sidorenko
Vladimir Sidorenko