背景

我正在将事件侦听器添加到HTML表单中,以检查每个字段中的输入是否有效。 例如:

inputElement.addEventListener("input", function(event) {
        if (!isValid(input.value)) {
            input.setCustomValidity("Input is invalid");
        } else {
            input.setCustomValidity("");
        }
});

但是,有问题的表单字段不是必填字段-用户可以在表单字段为空的情况下提交表单,但不能在输入无效的情况下提交表单。

问题

如果用户提交表单时从未触摸过该输入(将其留空),则"input"事件将永远不会发生,并且可以提交表单。 (好)

如果用户输入了不正确的输入并提交了表单,则他们将收到警告消息"input is invalid" (好)

但是,如果他们输入无效的输入,得到警告消息,然后删除输入,警告消息将出现,并且表单现在将提交。 (坏)

发生这种情况是因为删除输入的行为触发了input事件。

进度

我尝试使用textInput事件代替,但行为却相同。 我已经检查了其他可用事件,但看不到可以解决此问题的事件。

可以通过修改isValid函数使其工作(如果给定一个空字符串来返回true ,但如果可能的话,我想避免这种情况。 原因是:我在这里简化了示例,但实际上函数实际上是isValidServiceId ,从技术上讲,空字符串不是有效的服务ID。

#1楼 票数:1 已采纳

您可以修改条件逻辑以说“如果输入已填充 无效”,而不仅仅是“如果输入无效” ...

inputElement.addEventListener("input", function(event) {
  if (input.value.length && !isValid(input.value)) {
    input.setCustomValidity("Input is invalid");
  } else {
    input.setCustomValidity("");
  }
});

  ask by andydavies translate from so

未解决问题?本站智能推荐:

3回复

当输入的值为空格时,输入类型=电子邮件的更改事件不会触发

我向type=email输入元素添加了一个 on 'change' 事件侦听器。 当我在电子邮件字段中添加几个空格字符,然后失去对该元素的关注时,更改事件似乎没有触发。 但是,这个确切的场景适用于type=text输入元素。 这是怎么回事? 浏览器:Chrome 版本 63.0.3239.132(官
1回复

用户输入时引导程序4表单验证

我在一个简单的 index.php 中重新创建了我的问题,其中包含 2 个输入和 1 个重定向到 page2.php 的按钮。 我有 BS-4 表单验证,输入标签有一个正则表达式模式。 问题 1:它仅在我单击按钮后才进行验证。 不是我打字的时候。 问题2:当刷新不输入任何东西时,按钮将我重定向到pa
5回复

eventListener多次触发并增加

在点击功能上,我可以选择播放音频。 点击只被触发一次(在我添加.off() ,我似乎必须为每个点击事件做,因为我认为我从根本上没有得到关于javascript如何工作的东西)但是函数添加到了“结束” “监听器显示它正在点击按钮被点击的次数。 我认为.play()也被多次.play() 。
2回复

使EventListener仅触发一次,而不将其删除-没有jQuery

好的,所以我有以下代码行... ...这使我可以在滚动后更改标题的样式。 但是,当我进一步向下滚动页面时,它继续不必要地启动,因此在HTML的“标题”的类属性中添加了更多的“更短” 。 像这样: 我了解使用以下代码可以消除这种情况... ...但是,我只是不喜欢执行后的HTML外
1回复

EventListener不会通过点击div触发

我使用 Javascript 动态创建多个 div 当我使用“buy-item”类收集所有元素时,我将元素作为 HTMLCollection 获取,但是当我想知道它何时被点击时,什么也没有发生 HTML 元素如下所示
2回复

EventListener只触发一次

仍在学习 JS 的基础知识,现在使用 EventListeners。 试图制作一个来回改变文本颜色的按钮,但我认为我误解了该方法的性质,或者错误地使用了它。 我不相信这是一个语法问题。 我有文字和按钮,都带有 Id。 我为这两个元素创建了变量。 我给按钮添加了一个事件监听器,并在函数中定义了 if
1回复

动态生成的iframe内容上的Eventlistener不会触发

我有一个chrome扩展程序,可以将iframe注入已加载的页面。 iframe的内容以编程方式生成。 它包括一个添加了单击事件侦听器的按钮。 但这并不总是会触发。 在大多数情况下,它可以工作,但其中一种不起作用的情况是,该扩展程序是刚装入的(如已安装)。 以下是我的代码的要旨,您看到
1回复

如何将EventListener添加到querySelectorAll并在触发时获取元素索引(或id、值)?

我正在站点菜单中制作背景选择器,当用户点击规范时,它会改变背景图片。 图像(触发单选按钮)。 我想使用 querySelectorAll(".selected") 来完成它,循环它并设置 addEventListener(click, ..) get index(or id, value) 并使用