'Clear button should not required field HTML5

im creating the form include below code :

 <asp:TextBox ID="txtPhone" required="required" runat="server" placeholder="Phone No. (eg. 999)"
                    CssClass="glowStyle"></asp:TextBox>
    <br />
    <asp:Button ID="btnAddDriver" Text="Add" runat="server" CssClass="button" />
    <br />
    <asp:Button ID="btnCnclAddDriver" Text="Clear" runat="server" 
        CssClass="cancelbutton" onclick="btnCnclAddDriver_Click" />
    </form>

when i click the "Clear" button, the required (html5) still show up. how to disable it for Clear button only.



Solution 1:[1]

Do you actually require a server control to cancel ? A simple <input type="reset"> or a small javascript code can do the job in most situations.

If not, simple add CauseValidation="false" to your button :

<asp:Button ID="btnCnclAddDriver" CauseValidation="false" Text="Clear" runat="server" 
    CssClass="cancelbutton" onclick="btnCnclAddDriver_Click" />

(remove suggestion as it applies to asp.net validation)

Solution 2:[2]

You can set the autopostback option for btnCnclAddDriver button to False. And execute your server side code (btnCnclAddDriver_Click) by Ajax.

Solution 3:[3]

You can clear your TextBox(s) with javascript (jQuery) :

$('txtPhone').val('');

Or Javascript :

   function name()
   {  
       document.getElementById('txtPhone').value = "";
   }

Hope this help.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Steve B
Solution 2 SashaMo
Solution 3