So here’s something rather odd, if you have a form:

<form id="process" action="/form-submit-url" method="post">
  <input id="myinput" name="mydata" type="hidden" />
  <button type="submit">Submit</button>
</form>

And you try and populate the hidden mydata input using jquery before the form submits:

 $(document).ready(function() {
   $('#process').submit(function(event) {
     $('#myinput').val('hello world')
   });
 });

It won’t work. You can’t do any of these sort of things either:

 $('input[name=mydata]').val('hello world');
 $('#myinput').attr('value', 'hello world');
 etc 

You have to do:

$('input[name=mydata]').val('hello world'); 

Quite strange. See http://stackoverflow.com/questions/2979772/set-value-of-hidden-field-in-a-form-using-jquerys-val-doesnt-work

The non-jquery method works fine!

document.getElementById("mydata").value = 'hello world';

In my current project, I have users who want to regularly copy and paste stuff from excel and save it into a database via a web app. At first I tried an elaborate system where they would download a spreadsheet template, paste their data into it, upload it and get back a new spreadsheet with validation errors. It started getting quite complicated, and I was very happy to find the handsontable library (an awesome lightweight spreadsheet library) to use instead. The problem is that there aren’t many examples on how to add validation on the web. So I hope this helps some other poor soul like me.

First thing is to stop trying to use handsontable’s methods via jquery. I spent ages trying to get it working and getting terribly confused because examples on the internet were all using jquery but the documentation on the site was all just pure js. Definitely easiest to go the pure js way, don’t forget you can include pure js code in your jquery $(document).ready(function(){}) – it will work just fine. JQuery is just javascript after all!

So, here is an example on a few different types of validation methods:

 HTML:
<div id="exampleGrid" class="dataTable"></div>
<button id="submitData" type="button" class="btn btn-primary">Upload</button>

JS: (remember to include jquery for your bits and bobs, as well as handsontable's js and css)
var myData = [
 ["cat", '10/11/2015', ''],
 ["invalidvalue", '10/11/2015', ''],
 ["dog", '10/11/2015', ''],
 ["", '10/11/2015', '']
];

// Empty validator
emptyValidator = function(value, callback) {
 if (!value || 0 === value.length) {
 console.log('false');
 callback(false);
 } else {
 console.log('true');
 callback(true);
 }
};

// Handsontable options
hotOptions = {
 colHeaders: ['autocomplete','date', 'string'],
 minSpareRows: 0, // This must be 0 or else it tries to add a blank row as soon as you remove it for validation
 rowHeaders: true,
 contextMenu: true,
 colWidths: [240, 100, 100],
 columns: [
 { // Note, whenever you put "type: something", handsontable does its own validation and if you add a "validator: yourfunction" it seems to go haywire.
 type: 'autocomplete',
 source: ['cat', 'dog'],
 strict: true
 },
 { // It is more obvious with the date that some kind of validation is going on and it will get confused with your own custom validator. I don't know how you would add custom date validation, I haven't had to do that yet thank goodness
 type: 'date',
 dateFormat: 'DD/MM/YYYY',
 correctFormat: true,
 defaultDate: '01/01/2000'
 },
 { // Here is the empty column with your validator forcing text in there
 validator: emptyValidator
 }
 ],
 data: myData,
};

// Instantiate
var ht = new Handsontable(document.getElementById('exampleGrid'), hotOptions);

// Trigger more validation with the click
$('#submitData').click(function() {
 // Get the data in the cells
 var myTableData = ht.getData();

 // If the last row is empty, remove it before validation
 if(myTableData.length > 1 && ht.isEmptyRow(myTableData.length - 1)) {
 // Remove the last row if it's empty
 ht.alter('remove_row', parseInt(myTableData.length - 1), keepEmptyRows = false);
 }

 // Validate the cells and submit the form via ajax or whatever
 ht.validateCells(function(result, obj) {
 if(result == true) {
 console.log('submitted');
 }
 else {
 console.log('bad form data')
 }
 });
});

And here is a link to a jsFiddle: https://jsfiddle.net/sysb6wvd/2/

It took me a ridiculously long and frustrating time to work out how to do this, so I’m documenting what I’ve done in the hope that it helps someone else. If you want to extend the Django user model (to create a user profile, as described in the docs https://docs.djangoproject.com/en/1.9/topics/auth/customizing/#extending-the-existing-user-model) to create a user profile, and to still use Django-allauth you might as well give up on the documentation: it’s not going to help you. But what you need to do is fairly simple:

models.py

class Profile(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE)
    first_name = models.CharField(max_length=100)
    last_name = models.CharField(max_length=100)
    phone = models.CharField(max_length=100)

forms.py

class SignupForm(forms.ModelForm):
    class Meta:
        model = Profile
        fields = ('first_name', 'last_name', 'phone', 'type')

    # A custom method required to work with django-allauth, see https://stackoverflow.com/questions/12303478/how-to-customize-user-profile-when-using-django-allauth
    def signup(self, request, user):
        # Save your user
        user.first_name = self.cleaned_data['first_name']
        user.last_name = self.cleaned_data['last_name']
        user.save()

        # Save your profile
        profile = Profile()
        profile.user = user
        profile.phone = self.cleaned_data['phone']
        profile.type = self.cleaned_data['type']
        profile.save()

settings.py

# Required by django-allauth to extend the sign up form to include profile data
ACCOUNT_SIGNUP_FORM_CLASS = 'core.forms.SignupForm'

I’m not sure why I thought that django-allauth would take care of saving user profiles when it very explicitly says it doesn’t do anything apart from authentication. I suppose we should count ourselves lucky that it’s easy to extend the form to include additional profile fields.

To me, it doesn’t really make sense to store static data in a database – especially if there are only 5 or 6 errr datum you are wanting to store. Django allows you to use a Charfield with choices, i.e.

WIND = 'W'
SOLAR = 'S'
ENERGY_TYPE_CHOICES = (
    (WIND, 'Wind turbine'),
    (SOLAR, 'Solar panels')
)
energy_type = models.CharField(max_length=1, choices=ENERGY_TYPE_CHOICES, default=WIND)

But unfortunately you can’t select multiple choices, so in this case it wouldn’t be possible to associate both wind & solar with one of my models. It is suggested that developers store this info in a separate table and associate the choices with models using a manytomanyfield. Perhaps this makes sense if you want to associate the field options with multiple models, but it really seems overkill if you just want to have multiple choices for a single model.

Strangely there don’t seem to be many other people who have felt this to be too much (I mean, going by google anyway). As I have frequently found with Django, a few people have discussed it on stackoverflow and there are a million ways of doing the same thing with no clear indiciation as to which is most widely used and most sensible. Well, there are 3 different modules/alternatives:

• Multiselectfield: https://github.com/goinnn/django-multiselectfield
• Multiple_select_field: https://gist.github.com/kottenator/9a50e4207cff15c03f8e
• Select_multiple_field: https://github.com/kelvinwong-ca/django-select-multiple-field

This is ridiculous. Django’s “do-it-yourself” attitude is refreshing after coming from PHP and Drupal, but why isn’t something this ubiquitous integrated into Django itself?  This is something many projects are going to want. Or do I have it wrong and is it better to have a separate db table for like 2 or 3 fields?