CODEWITHSUNDEEP
htmlvalidationforms
Vijay
Vijay

Reputation: 8451

How to hide html5 form validation on reseting form

I have an HTML page with input fields and two buttons: Submit and Reset. When the user clicks on Submit, the required validation messages come up, that's fine, but they also come up when clicking Reset.

HTML:

<html>

<body>
    <form action="insertVoucherCategory" method="post">
        <table>
            <tr>
                <td>Voucher Category</td>
                <td>&nbsp;</td>
                <td><input  name="voucherCategory" id="voucherCategory" title="Please Enter Voucher Category" required="required" placeholder="Enter Voucher Category" tabindex="1" /></td>
            </tr>
            <tr>
                <td>Description</td>
                <td>&nbsp;</td>
                <td><input  name="description" id="description" title="Please Enter Description" required="required" placeholder="Enter Description" tabindex="2" /></td>
            </tr>
            <tr>
                <td><input type="submit" id="btnAdd" value="Submit" tabindex="3"/></td>
                <td>&nbsp;</td>
                <td><input type="reset" id="btnReset" value="Reset" tabindex="4"/></td>
            </tr>
        <table>
    </form>
</body>
</html>

This is what happens on Reset: Actual response

This is what I want: Ideal response

Upvotes: 0

Views: 198

Answers (2)

Ben Drake - MSFT
Ben Drake - MSFT

Reputation: 179

Use the type="reset" attribute on an <input> or <button> to automatically use HTML5 validation to clear the validation highlighting.

Tested satisfactorily on IE11 and Edge on Windows 10...

Upvotes: 0

Punitha Subramani
Punitha Subramani

Reputation: 1477

<input type="button" value="Reset" onclick="hideMsg()" />

function hideMsg(){
  $('.errMsg').hide();
  $('.required').val('');
  $('.required').addClass('blueBorder');
  $('.required').removeClass('redBorder');
}

Upvotes: 1

Related Questions