{"id":1936,"date":"2016-06-22T15:48:28","date_gmt":"2016-06-22T14:48:28","guid":{"rendered":"http:\/\/www.jurecuhalev.com\/blog\/?p=1936"},"modified":"2016-06-22T15:49:12","modified_gmt":"2016-06-22T14:49:12","slug":"ember-server-side-form-validation-with-django","status":"publish","type":"post","link":"https:\/\/www.jurecuhalev.com\/blog\/ember-server-side-form-validation-with-django\/","title":{"rendered":"Ember Server Side Form validation with Django"},"content":{"rendered":"

In previous post (Ember Server Side Form validation with Mirage<\/a>), I’ve looked at just the Ember.js side. In this article, I’ll connect it with Django so that we have an actual backend that’s returning our errors. It builds on top of previous Ember.js code. There are also full Github repositories at the end.<\/p>\n

Lets start with Django. We’ll be using Django Rest Framework<\/a> to generate server side Django.<\/p>\n

We have a basic models.py<\/strong>:<\/p>\n

\r\nfrom __future__ import unicode_literals\r\nfrom django.db import models\r\n\r\nclass Registration(models.Model):\r\n    GENDER_CHOICES = (\r\n        ('male', 'Male'),\r\n        ('female', 'Female'),\r\n        ('unspecified', 'Unspecified')\r\n    )\r\n\r\n    firstname = models.CharField(max_length=100)\r\n    lastname = models.CharField(max_length=100)\r\n    submitted = models.DateTimeField(auto_now_add=True)\r\n<\/pre>\n
and an API in views.py:<\/p>\n
\r\nfrom rest_framework import viewsets\r\nfrom rest_framework.response import Response\r\nfrom rest_framework import status\r\n\r\nfrom .models import Registration\r\nfrom .serializers import RegistrationSerializer\r\n\r\nclass RegistrationViewSet(viewsets.ViewSet):\r\n    def create(self, request):\r\n        serializer = RegistrationSerializer(data=request.data)\r\n        if serializer.is_valid():\r\n            serializer.save()\r\n            return Response(serializer.data, status=status.HTTP_201_CREATED)\r\n        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)\r\n<\/pre>\n
One thing to note – we return 400 Error code, instead of 422 that we mocked with Mirage. That is because Ember Django Adapter wraps 400 error to make it compatible with JSON API specification.<\/p>\n
All of our business logic of API validation happens in serializers.py<\/strong>:<\/p>\n
\r\nfrom rest_framework import serializers\r\n\r\nfrom . models import Registration\r\n\r\nclass RegistrationSerializer(serializers.ModelSerializer):\r\n    class Meta:\r\n        model = Registration\r\n        fields = ('id', 'firstname', 'lastname')\r\n   \r\n    def validate_firstname(self, value):\r\n    \tif 'john' not in value.lower():\r\n    \t\traise serializers.ValidationError('First name must be John')\r\n    \treturn value\r\n\r\n    def validate_lastname(self, value):\r\n\r\n    \tif 'smith' in value.lower():\r\n    \t\traise serializers.ValidationError("Last name can't be Smith")\r\n    \treturn value\r\n\r\n    def validate(self, data):\r\n    \tif data['firstname'] == 'John' and data['lastname'] == 'Doe':\r\n    \t\traise serializers.ValidationError("Please enter a more original name")\r\n<\/pre>\n
With server side in place, we can extend the previous example Ember.js app. We’ll be using Ember Django Adapter<\/a> to make things easier.<\/p>\n
First of, we need to turn of ember-cli-mirage in config\/environment.js<\/strong>. We also set the development URL and API namespace at the same time.<\/p>\n
\r\n  if (environment === 'development') {\r\n    ENV.APP.API_HOST = 'http:\/\/localhost:8000';\r\n    ENV.APP.API_NAMESPACE = 'api';\r\n\r\n    ENV['ember-cli-mirage'] = {\r\n      enabled: false\r\n    };\r\n  }\r\n<\/pre>\n
Another source of problems is that DS.RESTAdapter pluralises api endpoints. So instead of \/api\/registration\/<\/i> it posts to \/api\/registrations<\/b>\/<\/i>. To make it stop doing that we can define ‘registration’ as uncountable:
\n(ember generate drf-adapter application<\/strong>)<\/p>\n
\r\nimport DRFAdapter from '.\/drf';\r\nimport Inflector from 'ember-inflector';\r\n\r\nconst inflector = Inflector.inflector;\r\ninflector.uncountable('registration');\r\n\r\nexport default DRFAdapter.extend({});\r\n<\/pre>\n
Controller is still the same:<\/p>\n
\r\nimport Ember from 'ember';\r\n\r\nexport default Ember.Controller.extend({\r\n  actions: {\r\n    save() {\r\n      var model = this.get('model');\r\n\r\n      model.save().then((registration) => {\r\n        \/\/ it's a mock, we don't do anything\r\n      }).catch((adapterError) => {\r\n        \/\/ we just need to catch error\r\n      });\r\n    }\r\n  }\r\n});\r\n<\/pre>\n
The main improvement is that template error handling now also displays non-field errors (via model.errors.base<\/strong>):<\/p>\n
\r\n{{#each model.errors.base as |error|}}\r\n  <span class="errors">{{error.message}}<\/span>\r\n{{\/each}}\r\n\r\n<form>\r\n  <p>\r\n    <label>First name: {{input value=model.firstname}}<\/label>\r\n    {{#each model.errors.firstname as |error|}}\r\n      <span class="errors">{{error.message}}<\/span>\r\n    {{\/each}}\r\n  <\/p>\r\n  <p>\r\n    <label>Last name:\r\n      {{input value=model.lastname}}\r\n    <\/label>\r\n    {{#each model.errors.lastname as |error|}}\r\n      <span class="errors">{{error.message}}<\/span>\r\n    {{\/each}}\r\n  <\/p>\r\n  <button {{action 'save'}}>Save<\/button>\r\n<\/form>\r\n<\/pre>\n
With this in place, form validation errors now work correctly. If server side form validation passes, it also writes data into Data Store.<\/p>\n
Ember.js code is in ‘django-api’ branch at https:\/\/github.com\/ember-examples\/server-side-validation-mirage\/tree\/django-api<\/a>
\nDjango code is at https:\/\/github.com\/ember-examples\/django-drf-serializer-validations<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
In previous post (Ember Server Side Form validation with Mirage), I’ve looked at just the Ember.js side. In this article, I’ll connect it with Django so that we have an actual backend that’s returning our errors. It builds on top of previous Ember.js code. There are also full Github repositories at the end. Lets start […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[12,925],"tags":[],"class_list":["post-1936","post","type-post","status-publish","format-standard","hentry","category-django","category-ember-js"],"acf":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/posts\/1936","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/comments?post=1936"}],"version-history":[{"count":6,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/posts\/1936\/revisions"}],"predecessor-version":[{"id":1942,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/posts\/1936\/revisions\/1942"}],"wp:attachment":[{"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/media?parent=1936"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/categories?post=1936"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/tags?post=1936"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}