CODEWITHSUNDEEP
javascriptformshtmlfirefoxvalidation
Rudi
Rudi

Reputation: 541

How do I make a required radio input optional in Firefox using JavaScript?

I'm trying to use HTML5 Constraint Validation in my forms to help users spot errors client-side before they submit (and obviously also doing server-side validation).

I have a situation where I need to conditionally make some fields required or optional based on what the user chooses in other fields. However, in Firefox, I'm having trouble making radio inputs optional after they've been required at some earlier point. I've tried both removing the required attribute and setting this.willValidate to false on these radio inputs, but Firefox still seems to think they're required no matter what I do.

Here's a demo: http://jsfiddle.net/rrud/fUcUn/

Does anyone have ideas for anything else I could try in JavaScript to tell Firefox to make these radios optional once they've been required?

My example works great in Chrome and Opera, and in Firefox all of the non-radio inputs behave as expected... so maybe this is just a bug in Firefox? I'm using Firefox 13.0 on Win7.

Upvotes: 1

Views: 402

Answers (2)

alexander farkas
alexander farkas

Reputation: 14134

Use jQuery's prop method: $.fn.prop

-> $('input').prop('required', true|false);

http://jsfiddle.net/trixta/fUcUn/12/

Upvotes: 2

Kabilan S
Kabilan S

Reputation: 1094

Just add this to Your code

this.checked = false;

You code should look like

$(function() {
    $("#require").click(function() {
        $("input, textarea, select").attr('required', 'required');
    });
    $("#unrequire").click(function() {
        $("input, textarea, select").removeAttr('required').each(function() {
            this.willValidate = false;
            this.checked = false;
        });
    });
});

Check this fiddle http://jsfiddle.net/kabichill/ktfV6/

Upvotes: 0

Related Questions