update panel webcontrol required form field

Question

I created a simple control which uses an update panel with a button click trigger and yes a script manager above the control. Click the button and a label is updated with the current time and this has worked fine for 6 years

Today, I changed the page to be responsive with Bootstrap but this is irrelevant to this question.

The control was added to a page which has labels and textboxes (simple form with first name / last name).

<asp:TextBox ID="txtFirstName" runat="server" CssClass="form-control input-lg" Placeholder="Your First Name" MaxLength="20" Required="true"></asp:TextBox>

If I remove:

Required="true"

and click the button in the control the date / time updates but placing this back stops the date / time updating. I need to use both as I wish for the first name to be required but also for the time to update

Simple Example:

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Label ID="lblTime" runat="server" Text=""></asp:Label>
        <asp:Button ID="btnRefreshTime" runat="server" Text="Refresh Time" OnClick="btnRefreshTime_Click" />
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnRefreshTime" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>

Code Behind:

Protected Sub btnRefreshTime_Click(sender As Object, e As EventArgs)
    lblTime.Text = DateTime.Now.ToString()
End Sub

What am I doing wrong and what would I need to do to resolve it without opening the form up to abuse (script attacks) etc? I don't wish to add the following to the page directive:

ValidateRequest="false"

Thank you in advance

Answer 1

Probabily the button server side event is prevented to execute due to the client side validation of required = "true".

Try to change the button with somewhat else which does not trigger client side validation by design. I would try with a LinkButton.