HTML输入模式自定义验证消息导致错误

小提琴： https://jsfiddle.net/v45hrqs1/7/HTML输入模式自定义验证消息导致错误

所以，我用pattern属性来检查是否有有效的文件名被赋予建立一个小型的形式在HTML中。它的工作，所以当我输入filename/之类的东西，然后按回车，这将被捕获，我得到消息“请匹配请求格式”。

然后我想要一个更加自定义的消息，所以我添加了javascript部分。现在，当我输入一个无效的文件名并按下回车键后，新的信息就会显示出来，到目前为止还不错。

但是，当我现在将文件名更改为有效的文件名时，仍然收到错误消息。

我做错了什么？我的想法是在我更改文件名后，var input未更新。但我不知道如何解决这个问题。

来源

2016-05-20 yangsunny

我无法重现错误。我输入了'filename /'并且收到了错误信息，然后我删除了'/'，这个字段只包含'filename'并且成功了。这是否与测试代码的方式相同？ – mian

您是否取消了javascript部分的注释？正如我所说，错误只发生在我的自定义消息 – yangsunny

这不一定需要JavaScript。你可以只设置这样的输入自己的有效性检查：

<input type="text" class="form-control" id="packet_name" name="packet_name" pattern="[^\\/:\x22*?<>|]+" oninvalid="setCustomValidity('Invalid character in name:\n \/: * ? < >.')" oninput="setCustomValidity('')" maxlength="100" required>

而且oninput将清除出定制的有效性，从而将当它改变时重新评估。

来源

2016-05-20 10:14:17 thepio

Thx很多！奇迹般有效。我修改了一点，因为我试图jQuery，我想分开HTML和JS部分。 – yangsunny

是的，你可以做任何你想要的，但很高兴我可以帮助你:) – thepio

HTML输入模式自定义验证消息导致错误

回答

相关问题