Side navigation
#11782 closed bug (fixed)
Opened May 18, 2012 01:52AM UTC
Closed May 29, 2012 12:31AM UTC
Radio buttons set as "required" and then "not required" still act as required and prevent form submit
Reported by: | TylerRick | Owned by: | TylerRick |
---|---|---|---|
Priority: | low | Milestone: | None |
Component: | attributes | Version: | 1.7.2 |
Keywords: | Cc: | ||
Blocked by: | Blocking: |
Description
If you set a radio button as required using jQuery .attr('required', true)
and then try to set it as ''not'' required with .attr('required', false)
, then the radio button will ''still'' be required and will prevent the form from submitting -- even though the required property ''claims'' to be false
!
Here is a jsFiddle that reproduces this behavior:
http://fiddle.jshell.net/TylerRick/RPsXQ/show/
This appears to only be a problem in Firefox (for me). But it also appears to be specific to jQuery.
Attachments (0)
Change History (3)
Changed May 18, 2012 02:37AM UTC by comment:1
owner: | → TylerRick |
---|---|
status: | new → pending |
Changed May 18, 2012 03:04AM UTC by comment:2
_comment0: | By using `.prop()` consistently, I assume you mean using this to make the field required or not required: \ {{{ \ $(':input').prop('required', true); \ }}} \ and \ {{{ \ $(':input').prop('required', false); \ }}} \ \ Yes, that appears to work (where changing with `.prop()` did not) '''''*if*''''' I remove the initial attribute value `required="required"` from the HTML itself. \ \ It still does ''not'' work, however, if I leave that initial attribute value in there. \ \ I've updated my jsFiddle to reflect that: \ http://fiddle.jshell.net/TylerRick/RPsXQ/show/ \ \ It's almost as if doing '''''anything''''' with the 'required' attribute (even if it's setting an initial value in the HTML) is enough to cause `.prop('required', false)`/`.attr('required', false)` to no longer work... \ \ What's interesting is that I '''''can''''' change the 'required' attribute directly with plain old JavaScript (`.setAttribute('required', 'required')`) and both `.prop('required', false)`/`.attr('required', false)` will continue to work as expected. \ \ So I guess it's ''only'' setting `required="required"` via the HTML or `.attr('required', 'required')` via jQuery that causes this to not work as expected. → 1337357949490401 |
---|---|
status: | pending → new |
By using .prop()
consistently, I assume you mean using this to make the field required or not required:
$(':input').prop('required', true);
and
$(':input').prop('required', false);
Yes, that appears to work (where changing with .attr()
did not) ''*if*'' I remove the initial attribute value required="required"
from the HTML itself.
It still does ''not'' work, however, if I leave that initial attribute value in there.
I've updated my jsFiddle to reflect that:
http://fiddle.jshell.net/TylerRick/RPsXQ/show/
It's almost as if doing ''anything'' with the 'required' attribute (even if it's setting an initial value in the HTML) is enough to cause .prop('required', false)
/.attr('required', false)
to no longer work...
What's interesting is that I ''can'' change the 'required' attribute directly with plain old JavaScript (.setAttribute('required', 'required')
) and both .prop('required', false)
/.attr('required', false)
will continue to work as expected.
So I guess it's ''only'' setting required="required"
via the HTML or .attr('required', 'required')
via jQuery that causes this to not work as expected.
Changed May 29, 2012 12:31AM UTC by comment:3
component: | unfiled → attributes |
---|---|
priority: | undecided → low |
resolution: | → fixed |
status: | new → closed |
This has been fixed. The property was being set to empty string on all radios, which is still true, since the mere presence of boolean attributes indicates true, even if set to false.
If you're using a Boolean with
.attr()
the smell of fail is in the air already, since.attr()
should only be called with string values. If you want to change the in-memory DOM element property value and not the HTML markup attribute value then.prop()
would be the right choice.I think there should (at the moment) be a boolHook in place to "fix" this but it will be going away soon.
Does the problem appear if
.prop()
is used consistently?