Question

我有一个带有输入字段和两个按钮的HTML页面：Submit和Reset。当用户点击Submit时，会显示所需的验证消息，这很好，但是在点击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>

这是Reset上发生的事情： Actual response

这就是我想要的： Ideal response

Answer 1

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

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

Answer 2

使用PHAuthorizationStatusDenied或requestAuthorization上的type="reset"属性自动使用HTML5验证来清除验证突出显示。

在Windows 10上对IE11和Edge进行了令人满意的测试......

如何在重置表单上隐藏html5表单验证

2 个答案: