Back
Mar 6, 2010

Ajax form validation

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(MyModel, pk=new_id)
    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.

Subscribe for the news and updates

More thoughts
Feb 3, 2025Technology
Figma for Developers: What Dev Mode Offers and How to Use It

This article explores Figma’s Dev Mode, a tool that streamlines design-to-code translation by enabling precise inspection, automated code generation, and seamless integration with design systems.

Dec 22, 2024Technology
Python and the Point Rush in DeFi

This article demonstrates how to use Python to automate yield calculations in decentralized finance (DeFi), focusing on the Renzo and Pendle platforms. It guides readers through estimating potential rewards based on factors like token prices, liquidity, and reward distribution rules, emphasizing the importance of regular data updates and informed decision-making in DeFi investments.

May 26, 2017Technology
Tutorial: Django User Registration and Authentication

In this beginners friends article I'll explain how to make authentication with Google account on your Django site and how to make authentication for you REST API.

Sep 22, 2016Technology
Angular Form Validation

In this article, we will describe some useful scripts and directives we use with angular form validation in our projects.

Jun 25, 2011Technology
Ajax blocks in Django

Quite often we have to write paginated or filtered blocks of information on page. I created a decorator that would automate this process.

Mar 4, 2011Technology
Css sprite generation

I've created this small sprite to create css sprites. It glues images from directory directory into single file and generates corresponding css.