Javascript 验证失败后未重置表单验证

我正在使用一个小脚本来验证邮政编码，它可以工作并阻止用户输入无效的密码，但是当输入无效的邮政编码时，您就无法提交正确的输入。例如，如果我输入“ST”，我会收到一条消息，告诉我邮政编码无效，因此在不手动刷新页面的情况下，我会输入“ST6 1SA”（这是一个有效的斯托克邮政编码），并且我无法提交表单，我只会不断收到无效的工具提示，提示我邮政编码格式不正确

JS:

//发送前验证邮政编码
（功能（）{
var postcode=document.getElementById（'postcode-entry'）；
var wrapper=document.getElementById（'validation'）；
var notify=document.createElement（'div'）；
var mnisLookup=document.getElementById（'mnis-results'）；
var matchingClients=document.getElementById（'matching-clients'）；
var postcodeWrapper=document.getElementById（'postcode-wrapper'）；
notify.id='notify'；
notify.style.display='none'；
appendChild（通知）；
postcode.addEventListener（'invalid'，函数（事件）{
如果（！event.target.validity.valid）{
notify.textContent='请输入有效的邮政编码，例如ST1、ST1 4BJ'；
notify.className='error'；
notify.style.display='block'；
postcode.className='表单控件无效'；
}                
});
})();

HTML:

邮政编码：

---

只是一个可能会影响页面刷新方式的简要说明，它位于MVC Razor页面内，用

Html.BeginForm

包装-不确定这是否有区别？

在调试代码时，我发现

event.target.validity.valid

返回false，即使输入有效，例如“ST6 1SA”。发生这种情况是因为它不会更新新输入的自定义验证，并且即使在输入有效输入后，以前的状态仍然存在

因此，要更新和重置以前的验证，您必须在输入更改时重置

setCustomValidity（“”）

，即

oninput=“setCustomValidity（“”）”

请替换此代码：

<input type="text" pattern="^(([gG][iI][rR] {0,}0[aA]{2})|((([a-pr-uwyzA-PR-UWYZ][a-hk-yA-HK-Y]?[0-9][0-9]?)|(([a-pr-uwyzA-PR-UWYZ][0-9][a-hjkstuwA-HJKSTUW])|([a-pr-uwyzA-PR-UWYZ][a-hk-yA-HK-Y][0-9][abehmnprv-yABEHMNPRV-Y])))( {0,}[0-9][abd-hjlnp-uw-zABD-HJLNP-UW-Z]{2})?))$" oninvalid="setCustomValidity('Invalid Post Code Format ')" class="form-control" id="postcode-entry" placeholder="Enter your postcode" name="Postcode" oninput="setCustomValidity('')"/>

如果在验证失败之前添加该邮政编码并返回预期的result@WebDevelopWolf您好，我找到了解决方案并更新了答案。如果它解决了你的问题，请标记为有帮助谢谢，这是绝对疯狂的。web开发到底发生了什么？？

<form id="postcode-wrapper" class="form-horizontal">
        <div id="postcode-lookup" class="form-group">
            <label for="postcode-entry" class="col-sm-1">Postcode:</label>
            <div id="postcode-entry-wrapper" class="col-sm-3">
                <input type="text" pattern="^(([gG][iI][rR] {0,}0[aA]{2})|((([a-pr-uwyzA-PR-UWYZ][a-hk-yA-HK-Y]?[0-9][0-9]?)|(([a-pr-uwyzA-PR-UWYZ][0-9][a-hjkstuwA-HJKSTUW])|([a-pr-uwyzA-PR-UWYZ][a-hk-yA-HK-Y][0-9][abehmnprv-yABEHMNPRV-Y])))( {0,}[0-9][abd-hjlnp-uw-zABD-HJLNP-UW-Z]{2})?))$" oninvalid="setCustomValidity('Invalid Post Code Format ')" class="form-control" id="postcode-entry" placeholder="Enter your postcode" name="Postcode" />
            </div>
            <div class="col-sm-1">
                <input id="search" type="submit" value="Search" class="btn btn-default" />
            </div>
            <div id="validation" class="col-sm-7"></div>
        </div>
    </form>

<input type="text" pattern="^(([gG][iI][rR] {0,}0[aA]{2})|((([a-pr-uwyzA-PR-UWYZ][a-hk-yA-HK-Y]?[0-9][0-9]?)|(([a-pr-uwyzA-PR-UWYZ][0-9][a-hjkstuwA-HJKSTUW])|([a-pr-uwyzA-PR-UWYZ][a-hk-yA-HK-Y][0-9][abehmnprv-yABEHMNPRV-Y])))( {0,}[0-9][abd-hjlnp-uw-zABD-HJLNP-UW-Z]{2})?))$" oninvalid="setCustomValidity('Invalid Post Code Format ')" class="form-control" id="postcode-entry" placeholder="Enter your postcode" name="Postcode" oninput="setCustomValidity('')"/>