HTML5 "required" validation breaks formset empty forms. #75

Closed
melinath opened this Issue Jul 12, 2013 · 8 comments

Projects

None yet

4 participants

@melinath
Collaborator

The empty forms on a formset may have multiple extra empty forms. If one of the extra forms remains empty, but has any "required" fields, browsers that support HTML5 pre-submit validation (like Chrome) will refuse to submit the formset (even though it would be valid according to Django's logic.)

Django's admin doesn't have this problem because it just doesn't set the "required" attribute on any form fields. Maybe floppyforms should just do the same? Seems less complicated than the alternatives.

@gregmuellegger
Owner

Hm that's really a tricky issue I haven't thought of yet. We'll definitely will need to find a solution. But I'm not sure if not using the required attribute is the right one.

For now you can work around this issue by overwriting the floppyforms/attrs.html template:

{% for name, value in attrs.items %}{% if name != "required" %} {{ name }}{% if value != True %}="{{ value }}"{% endif %}{% endif %}{% endfor %}
@carljm
Collaborator
carljm commented Sep 9, 2013

HTML5 browser-side required validation is a much nicer UX than having to submit the form before seeing the error; -1 to eliminating the required attribute from the floppyforms widget templates.

The easiest solution here is to just put the empty form outside the HTML <form> tag, then the browser will ignore it.

An even nicer solution (IMO) is to wrap the empty-form HTML in a <script type="text/html"> (rather than a <div style="display: none;">); then the browser will neither display nor interpret the empty-form HTML in any way. This does require some change to the JS used for dynamic formsets, as the empty-form HTML will be available as a single HTML string rather than as DOM nodes.

@gregmuellegger
Owner

@carljm I totally like your pragmatic approach here, which works in all cases where you want to use JS.
But unfortunatelly this issue is not solved totally then :( django has the extra parameter for formsets to include new, empty forms that can be filled in.

@brutasse
Collaborator
brutasse commented Oct 1, 2013

Maybe we could just document the issue and tell people to use <form novalidate> when they have optional formsets? This obviously disables browser validation but it seems a bit saner than manipulating extra empty forms to mark them as not required.

@gregmuellegger
Owner

+1, it doesn't require JS either.

And if you have JS enabled, one could implement a $('.empty-form :input[required]').removeAttr('required');

@carljm
Collaborator
carljm commented Oct 1, 2013

Yes, the latter JS approach is what we do when we have extra empty forms. +1 to documenting both those possible approaches.

@melinath
Collaborator

FTR, this also seems to break the "previous step" buttons in form wizards.

@gregmuellegger
Owner

I think this is also a case where novalidate is the correct approach. We still need to add some documentation for this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment