Skip to main content

Bug Tracker

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 dmethvin comment:1

owner: → TylerRick
status: newpending

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?

Changed May 18, 2012 03:04AM UTC by TylerRick 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: pendingnew

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 timmywil comment:3

component: unfiledattributes
priority: undecidedlow
resolution: → fixed
status: newclosed

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.