noneI have a form where the user can hide or show fields by clicking a checkbox. I am hiding the fields like this:

 $("#ContactDetail_PostalAddressSameAsAddress").change(function () {
        if ($(this).prop('checked') != true) {
            $("#PostalAddressContainer").show("fast");
            $('#PostalAddressContainer :input').show();

        }
        else {
            $("#PostalAddressContainer").hide("fast");
            $('#PostalAddressContainer :input').hide();
        }
    });

I was under the impression that field with style="display:none" do not post back. However, when I submit the form, the client side validation does not validate the hidden fields, which is what I expect. But, on the server side ModelState.IsValid is false due to the mandatory display:none fields not being set.

In fiddler I can see the form data for the display:none fields. Please help.

noneI have a form where the user can hide or show fields by clicking a checkbox. I am hiding the fields like this:

 $("#ContactDetail_PostalAddressSameAsAddress").change(function () {
        if ($(this).prop('checked') != true) {
            $("#PostalAddressContainer").show("fast");
            $('#PostalAddressContainer :input').show();

        }
        else {
            $("#PostalAddressContainer").hide("fast");
            $('#PostalAddressContainer :input').hide();
        }
    });

I was under the impression that field with style="display:none" do not post back. However, when I submit the form, the client side validation does not validate the hidden fields, which is what I expect. But, on the server side ModelState.IsValid is false due to the mandatory display:none fields not being set.

In fiddler I can see the form data for the display:none fields. Please help.

• javascript
• jquery
• html
• css
• forms

• 1 because they are hidden, not disabled/removed. Just like how type="hidden" are sent back. – epascarello Commented Mar 20, 2014 at 2:55

5 Answers 5

Try disabling the form field:

$("#PostalAddressContainer").prop("disabled", true);

If it is only hidden, it will still be sent along with the POST request. CSS should never have any effect on form behavoir since its purpose is for changing how things are displayed.

Note, this is also the main point of <input type="hidden"> - to not be displayed to the user, but still be sent along with the request.

You can disable it

$('#PostalAddressContainer').attr('disabled', 'disabled');

which will not be considered in a POST request.

Unfortunately, your impression was incorrect. All successful controls are serialized and sent by the browser when a form is submitted.

The HTML spec defines what makes a control successful.

A successful control is "valid" for submission. Every successful control has its control name paired with its current value as part of the submitted form data set. A successful control must be defined within a FORM element and must have a control name.

However:

• Controls that are disabled cannot be successful.
• If a form contains more than one submit button, only the activated submit button is successful.
• All "on" checkboxes may be successful.
• For radio buttons that share the same value of the name attribute, only the "on" radio button may be successful.
• For menus, the control name is provided by a SELECT element and values are provided by OPTION elements. Only selected options may be successful. When no options are selected, the control is not successful and neither the name nor any values are submitted to the server when the form is submitted.
• The current value of a file select is a list of one or more file names. Upon submission of the form, the contents of each file are submitted with the rest of the form data. The file contents are packaged according to the form's content type.
• The current value of an object control is determined by the object's implementation.

If a control doesn't have a current value when the form is submitted, user agents are not required to treat it as a successful control.

Furthermore, user agents should not consider the following controls successful:

• Reset buttons.
• OBJECT elements whose declare attribute has been set.

Hidden controls and controls that are not rendered because of style sheet settings may still be successful.

The spec explicitly says that hidden form elements should get sent to the server.

In addition to hiding the fields, you need to disable them.

$("#PostalAddressContainer :input").prop("disabled", true).hide();

I'm not too sure what is the question but, that's normal behaviour. You should add server-side validation as well since your application requires a more customised validation logic.

BTW, server-side validation is also a remended practice

style="display:hidden" is not valid. I believe you are confusing it with style="visibility:hidden;"

I believe you want to use style="display:none;"