Custom widget not validating only the first time

Question

I've created a custom widget OrderedCheckboxSelectMultiple, I'm just replacing <ul> for <ol> and adding some classes to <label>, <li>, etc.:

class OrderedCheckboxSelectMultiple(forms.CheckboxSelectMultiple):

    def render(self, name, value, attrs=None, choices=()):
        if value is None: value = []
        has_id = attrs and 'id' in attrs
        final_attrs = self.build_attrs(attrs, name=name)
        output = [u'<ol class="numeric">']
        # Normalize to strings
        str_values = set([force_unicode(v) for v in value])
        for i, (option_value, option_label) in enumerate(chain(self.choices, choices)):
            # If an ID attribute was given, add a numeric index as a suffix,
            # so that the checkboxes don't all have the same ID attribute.
            if has_id:
                final_attrs = dict(final_attrs, id='%s_%s' % (attrs['id'], i))
                label_for = u' for="%s"' % final_attrs['id']
            else:
                label_for = ''

            cb = forms.CheckboxInput(final_attrs, check_test=lambda value: value in str_values)
            option_value = force_unicode(option_value)
            rendered_cb = cb.render(name, option_value)
            option_label = conditional_escape(force_unicode(option_label))
            output.append(u'<li class="liAll"><label%s class="checkbox inline">%s <span class="spanLabel">%s</span></label></li>' % (
                label_for, rendered_cb, option_label))
        output.append(u'</ol>')
        return mark_safe(u'\n'.join(output))

I'm using this widget in a form in two different fields:

class SomeForm(forms.Form):
    # more fields here

    alert1 = forms.MultipleChoiceField(choices=[(a.id, a.description) for a in SomeModel.objects.filter(a=True)],
                                             widget=OrderedCheckboxSelectMultiple())
    alert2 = forms.MultipleChoiceField(choices=[(a.id, a.description) for a in SomeModel.objects.filter(b=True)],
                                             widget=OrderedCheckboxSelectMultiple())

The problem is that, when I submit the form for the first time I get a validation error:

Select a valid choice. is not one of the available choices.

Then, when I tick the choices again, it validates without trouble. I'm lost here. Any suggestions?

Note:

The same thing happens if I use forms.CheckboxSelectMultiple as a widget for alert1 and alert2.

Edit:

~~While debugging, I can see that alert1 and alert2 are not present on the request.POST the first time I submit.~~

Sorry, I made a mistake. alert1 and alert2 are present on the request.POST but they are both u'' despite being ticked.

Edit 2:

Using Chrome's "Inspect element" I can see the form is rendering properly the first time:

<ol class="numeric">
    <li class="liAll">
        <label for="id_alert1_0" class="checkbox inline">
            <div class="checker" id="uniform-id_alert1_0">
                <span>
                    <input value="1" type="checkbox" class="check" name="alert1" id="id_alert1_0" style="opacity: 0;">
                </span>
            </div>
        </label>
    </li>
    <li class="liAll">
        <label for="id_alert1_1" class="checkbox inline">
            <div class="checker" id="uniform-id_alert1_1">
                <span>
                    <input id="id_alert1_1" type="checkbox" class="check" value="2" name="alert1" style="opacity: 0;">
                </span>
            </div>
        </label>
    </li>
</ol>

Then the validation message is shown again, but the rendered form look the same:

<ol class="numeric">
    <li class="liAll">
        <label for="id_alert1_0" class="checkbox inline">
            <div class="checker" id="uniform-id_alert1_0">
                <span>
                    <input value="1" type="checkbox" class="check" name="alert1" id="id_alert1_0" style="opacity: 0;">
                </span>
            </div>
        </label>
    </li>
    <li class="liAll">
        <label for="id_alert1_1" class="checkbox inline">
            <div class="checker" id="uniform-id_alert1_1">
                <span>
                    <input id="id_alert1_1" type="checkbox" class="check" value="2" name="alert1" style="opacity: 0;">
                </span>
            </div>
        </label>
    </li>
</ol>

I'm submitting the post with a submit button:

<button type="submit" class="btn btn-primary">Send</button>

print `request.POST` to see what value is being submitted the first time ? — Amyth, Dec 29 '12 at 20:30
from the error message i guess an empty value is being submitted. If 'something' was sent the error would be "Something is not one of the available choices" — ppetrid, Dec 30 '12 at 02:48
@ppetrid yes, the first time it's nothing on the request.POST — César, Dec 30 '12 at 17:30
I think you should also check on the client side, if the form is rendering properly and selection is done properly if data is missing from your request.POST — dusual, Jan 02 '13 at 08:56
you should check the HTML in the browser, the problem should be there — Facundo Casco, Jan 03 '13 at 14:17
Check the before and after html markup. It should definitely give a clue. The markup on the initial might not be able to post the variables. — Victor 'Chris' Cabral, Jan 03 '13 at 20:22
How are you posting? Are you using a submit button? Are you making an ajax call with $.post? I ran the snippet and I am seeing the variables in the request.POST. — Victor 'Chris' Cabral, Jan 03 '13 at 21:51
I copy and pasted this code into a quick django app and it worked fine. Maybe include the full model/form/view/url definition/django version. — Victor 'Chris' Cabral, Jan 04 '13 at 16:06
@César As I can see both the name attribute in both the inputs is alert1. Is this right ?? — dusual, Jan 06 '13 at 05:23
@dusual doesn't matter as long as they have different IDs and/or values — César, Jan 07 '13 at 13:48
are you using a clean method in your form,? it's look like you are forgetting to return the value after cleaning. — anacarolinats, Jan 08 '13 at 13:34
@anacarolinats nope, that's not the case. I'm returning cleaned_data in my clean() method — César, Jan 08 '13 at 16:01

score 1 · Answer 1 · answered Jan 05 '13 at 19:22

I copied and pasted your code in a quick django app. Worked just fine for me. Are there other places the error could be? Django 1.4 on OS x.

views.py

class OrderedCheckboxSelectMultiple(CheckboxSelectMultiple):
    def render(self, name, value, attrs=None, choices=()):
        if value is None: value = []
        has_id = attrs and 'id' in attrs
        final_attrs = self.build_attrs(attrs, name=name)
        output = [u'<ol class="numeric">']
        # Normalize to strings
        str_values = set([force_unicode(v) for v in value])
        for i, (option_value, option_label) in enumerate(chain(self.choices, choices)):
            # If an ID attribute was given, add a numeric index as a suffix,
            # so that the checkboxes don't all have the same ID attribute.
            if has_id:
                final_attrs = dict(final_attrs, id='%s_%s' % (attrs['id'], i))
                label_for = u' for="%s"' % final_attrs['id']
            else:
                label_for = ''

            cb = CheckboxInput(final_attrs, check_test=lambda value: value in str_values)
            option_value = force_unicode(option_value)
            rendered_cb = cb.render(name, option_value)
            option_label = conditional_escape(force_unicode(option_label))
            output.append(u'<li class="liAll"><label%s class="checkbox inline">%s <span class="spanLabel">%s</span></label></li>' % (
            label_for, rendered_cb, option_label))
            output.append(u'</ol>')
        return mark_safe(u'\n'.join(output))

class SomeForm(forms.Form):
    alert1 = MultipleChoiceField(choices=[(a.id, a.name) for a in Widget.objects.filter(a=False)],
                                         widget=OrderedCheckboxSelectMultiple())
    alert2 = MultipleChoiceField(choices=[(a.id, a.name) for a in Widget.objects.filter(a=False)],
                                         widget=OrderedCheckboxSelectMultiple())

def index(request):
    if request.method =="POST":
        form = SomeForm(request.POST)
        print(request.POST.keys())
        if form.is_valid():
            print("trying to save")
    else:
        form = SomeForm()
    return render_to_response('publichome.html', locals(), context_instance=RequestContext(request))

Is there more code in your form's save method or in your view that could cause errors that are not in your Widget code? — Victor 'Chris' Cabral, Jan 05 '13 at 19:24
Thanks for your answer. I'm not near my laptop now but I tried a new form with only those two fields like you did in your answer and works fine. You are right the problem must be somewhere else. I'll update the question later. — César, Jan 05 '13 at 20:10

Custom widget not validating only the first time

1 Answers1

views.py