I have a simple form as below:

<form id="form1" runat="server">
    <div>
        Line 1: <asp:TextBox ID="Line1TextBox" runat="server" placeholder="e.g. Street 9" required ></asp:TextBox>
        <br />
        Fill Line 2? <asp:CheckBox ID="Line2CheckBox" runat="server" OnClick="Line2CheckBox_Chekced();"  />
        <br />
        <div ID="Line2Panel" style="display: none;">
            Line 2: <asp:TextBox ID="Line2TextBox" runat="server" placeholder="e.g. Street 9" required ></asp:TextBox>
        </div>
        <asp:Button ID="NextButton" runat="server" Text="Next" OnClientClick="return NextButton_Click();" />        
    </div>
</form>

The Line2CheckBox is toggling the Line2Panel with the following script:

function Line2CheckBox_Chekced() {
     $("#Line2Panel").toggle();
}

In the NextButton_Click I am checking whether the form is valid or not as follows:

function NextButton_Click() {
    if ($('#form1')[0].checkValidity()) {
        alert("from is valid");
   } else {
        alert("from is NOT valid");
   }
}

I have noticed the following:

• If I enter some value in the Line1TextBox and attempt to submit the form, while Line2TextBox is hidden, the form is not submitted because the form in not valid (checkValidity() returns false).
• If I click on the CheckBox to show Line2TextBox and enter some value in it, the form is submitted correctly.
• If I mark Line2TextBox as disabled and don't put any value, the form is submitted.

My questions are:

1. Is this the default behavior of HTML5 forms (invisible hidden fields but not disabled fields)?
2. More importantly, how to stop HTML5 from validating invisible fields (I have tried to use oninvalid event to check wehther the field is visible or not, $(obj).is(":visible"), then cancel the event but it didn't work)?

My goal is that if the field is invisble then mark it as valid, something like the following but I don't know where to write it (or to which event I should attach this code):

if (obj.willValidate && !$(obj).is(":visible")) 
    //cancel the validation event or consider the field as valid

I have a simple form as below:

<form id="form1" runat="server">
    <div>
        Line 1: <asp:TextBox ID="Line1TextBox" runat="server" placeholder="e.g. Street 9" required ></asp:TextBox>
        <br />
        Fill Line 2? <asp:CheckBox ID="Line2CheckBox" runat="server" OnClick="Line2CheckBox_Chekced();"  />
        <br />
        <div ID="Line2Panel" style="display: none;">
            Line 2: <asp:TextBox ID="Line2TextBox" runat="server" placeholder="e.g. Street 9" required ></asp:TextBox>
        </div>
        <asp:Button ID="NextButton" runat="server" Text="Next" OnClientClick="return NextButton_Click();" />        
    </div>
</form>

The Line2CheckBox is toggling the Line2Panel with the following script:

function Line2CheckBox_Chekced() {
     $("#Line2Panel").toggle();
}

In the NextButton_Click I am checking whether the form is valid or not as follows:

function NextButton_Click() {
    if ($('#form1')[0].checkValidity()) {
        alert("from is valid");
   } else {
        alert("from is NOT valid");
   }
}

I have noticed the following:

• If I enter some value in the Line1TextBox and attempt to submit the form, while Line2TextBox is hidden, the form is not submitted because the form in not valid (checkValidity() returns false).
• If I click on the CheckBox to show Line2TextBox and enter some value in it, the form is submitted correctly.
• If I mark Line2TextBox as disabled and don't put any value, the form is submitted.

My questions are:

1. Is this the default behavior of HTML5 forms (invisible hidden fields but not disabled fields)?
2. More importantly, how to stop HTML5 from validating invisible fields (I have tried to use oninvalid event to check wehther the field is visible or not, $(obj).is(":visible"), then cancel the event but it didn't work)?

My goal is that if the field is invisble then mark it as valid, something like the following but I don't know where to write it (or to which event I should attach this code):

if (obj.willValidate && !$(obj).is(":visible")) 
    //cancel the validation event or consider the field as valid

• javascript
• jquery
• html
• forms

• A field that is not displayed on your screen is not of hidden type, it is just not shown, so it's perfectly normal it is validated as well. If you need custom validation, you should put it in place yourself. regarding disabled fields, I don't even think their value is even submitted, so that's perfectly logic once again that the'yre not validated... but once again you could force it with custom validation. – Laurent S. Commented Feb 27, 2014 at 16:31
• Can you please explain more about custom validation, I want something like if (obj.willValidate && !$(obj).is(":visible")) //cancel the validation event or consider the field as valid – sh_kamalh Commented Feb 27, 2014 at 18:39
• I have updated the question to reflect that I mean invisible fields not hidden fields. – sh_kamalh Commented Feb 28, 2014 at 5:59

2 Answers 2

I think these could be logical answers to my questions:

1. It mekes sense to validate invisible fields. For example if a field is invisible because it is in an accordion control or in a collapsible panel, it should be validated.

2. One way to stop HTML5 from validating invisible fields is to mark them as not required. In my case when I check / uncheck the CheckBox I do the following:

   function Line2CheckBox_Chekced() {
       var isChecked = $("#Line2CheckBox").is(":checked");
       if (isChecked) {
            $("#Line2Panel").show();
            $("#Line2TextBox").attr("required", "");
       } else {
            $("#Line2Panel").hide();
            $("#Line2TextBox").removeAttr("required");
       }
   }
   

So I think I will be checking the following now:

1. How to cancel the validation of a certain control?
2. How to show the error message from invisible fields?

Adding Alexander Farkas's ment as an answer because it helped me (emphasis mine):

Adding/removing required attribute isn't always suitable because:

a) There are other possible HTML5 constraints.

b) You don't want to keep track of all those elements inside of a form group.

The best way is to add the disabled property on the element itself or on the fieldset element

Example:

<fieldset disabled>
  <input type="text" name="foo" required />
</fieldset>