事件监听器对HTML5表单有效 [英] Event Listener valid for HTML5 forms

问题描述

$ b

 在HTML5上新增了一个无效事件，您可以添加一个侦听器。 code> document.addEventListener（'invalid'，function（e）{
 var element = $（e.target）; 
 element.addClass（invalid）; 
 element .parent（）。addClass（invalid）; 
}，true）; 
  

请注意，这个事件在提交表单时工作正常......如果我输入 input：invalid {background：red} ，当用户开始输入并且输入无效时应用样式。该事件是否仅在提交时被解雇？我尝试将侦听器添加到输入本身而不是文档，并且它不起作用。 我添加了一个侦听器，以便将样式应用于输入的父母...现在，当用户纠正它时，它再次有效......我知道没有有效事件，所以，我该如何实现它？

---

好的，这是一个小提琴 - > http://jsfiddle.net/Osoascam/ceArQ/7/
无效的监听器似乎只在提交时被解雇......我只是想知道是否有添加处理程序的方式就像聚焦一样。如果您输入一个

请提前致谢，

Óscar

<您应该使用：无效的伪选择器和输入或更改事件来解决您的问题。

< （$（e.target）.is（'：invalid'））{$ p $（$）$ $ $ $
$（e.target）.parent（）。addClass（'invalid'）;
} else {
$（e.target）.parent（）。removeClass（'invalid'）;
}
}）;

这是一个简单的小提琴 http://jsfiddle.net/trixta/YndYx/ 。

如果您想尽快删除错误类尽可能在变化上添加错误类，并在输入事件中删除它（注意：输入事件比此处建议的键控更好，因为它也是在粘贴等触发的，但它仅适用于输入元素，而不是textarea。）

以下是一个使用输入和变化事件混合的小提琴：
http://jsfiddle.net/trixta/jkQEX/

如果你想拥有这个跨浏览器您可以简单地使用 webshims lib 进行填充。这里是一个X浏览器的例子：
http://jsfiddle.net/trixta/RN8PA/

1. New on HTML5 there's an "invalid" event, to which you can add a listener:

   document.addEventListener('invalid', function(e){
      var element = $(e.target);
      element.addClass("invalid");
      element.parent().addClass("invalid");
   }, true);
   

   Please note, this event just works when submitting the form... If I style the input input:invalid { background: red }, the style is applied when the user starts typing and his input is not valid. Is that event only fired on submit? I tried adding the listener to the inputs themselves instead of the document and it didn't work.

2. I add a listener in order to apply a style to the input's parent... Now, when the user corrects it, it's valid again... I know there's not a "valid" event, so, how can I accomplish it?

---

Ok, so here's a fiddle --> http://jsfiddle.net/Osoascam/ceArQ/7/ The invalid listener seems to be only fired on submit... I just wanted to know whether there's a way to add a handler just like there is for focus. See that if you type a

Thanks in advance,

Óscar

解决方案

You should use the :invalid pseudo selector and the input or the change event, to solve your problem.

$(document).bind('change', function(e){
    if( $(e.target).is(':invalid') ){
        $(e.target).parent().addClass('invalid');
    } else {
        $(e.target).parent().removeClass('invalid');
    }
});

Here is a simple fiddle http://jsfiddle.net/trixta/YndYx/.

If you want to remove the error class as soon as possible you should add the error class on change and remove it on the input event (Note: input event is much better than here suggested keyup, simply because it also is triggered on paste etc., but it only works with input elements, not textarea.)

And here is a fiddle using a mixture of input and change event: http://jsfiddle.net/trixta/jkQEX/

And if you want to have this cross browser you can simply use webshims lib to polyfill. Here is a x-browser example: http://jsfiddle.net/trixta/RN8PA/

这篇关于事件监听器对HTML5表单有效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！