HTML 5 required attribute - constrain validation within a div?

Question

Given a form containing 2 div's and each div containing an asp textbox with "required" attribute, is it possible to constrain html5 required attribute to only be considered within the div that contains the textbox? So, for example, can I have required attribute on textbox in the first div that isn't validated when you click on the button in the second div? I should add that I'm trying to do this in a content page.

<form>
    <div>
        <asp:textbox runat="server" id="TextBox1" required="required"></asp:textbox>
        <asp:button runat="server" id="Button1" text="Save"  />
        <asp:button runat="server" id="Button2" text="Cancel"  onclientclick="return false" />
    </div>
    <div>
        <asp:textbox runat="server" id="TextBox2" required="required"></asp:textbox>
        <asp:button runat="server" id="Button3" text="Save"  />
        <asp:button runat="server" id="Button4" text="Cancel"  onclientclick="return false" />
    </div>
</form>

Answer 1

The standard html5 validation does not have a built in option for "if this input meets requirements, make this input non-required". In order to accomplish this within a single form, you will need to write a very small amount of JavaScript to remove the required attribute from the other text input when the current text input meets your requirements, otherwise the form will not pass client-side validation and the other text input will match the :invalid pseudo-class.

I would suggest switching to a jquery plugin such as http://www.formvalidator.net, which will not require you to write any code. You can use html attributes such as data-validation-depends-on from the above plugin to accomplish this.