事件监听器对HTML5表单有效

Question

1. 在HTML5上新增了一个“无效”事件，您可以添加一个监听器：

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

   请注意，此事件仅在提交表单时有效...如果我设置输入input:invalid { background: red }样式input:invalid { background: red } ，则在用户开始输入并且输入无效时应用样式。 该事件仅在提交时触发吗？ 我尝试将侦听器添加到输入本身而不是文档，但它不起作用。

2. 我添加了一个监听器，以便将一个样式应用于输入的父...现在，当用户更正它时，它再次有效...我知道没有“有效”事件，所以，我该如何实现它？

---

好吧，所以这里是一个小提琴 - > http://jsfiddle.net/Osoascam/ceArQ/7/无效的监听器似乎只是在提交时被解雇...我只是想知道是否有办法添加处理程序只是喜欢有焦点。 如果你输入一个，请看

提前致谢，

奥斯卡

Answer 1

您应该使用：invalid pseudo selector和input或change事件来解决您的问题。

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

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

如果你想尽快删除错误类，你应该在更改时添加错误类并在输入事件中删除它（注意：输入事件比这里建议的keyup要好得多，因为它也是在粘贴等时触发的。 ，但它只适用于输入元素，而不是textarea。）

这里有一个使用输入和变化事件混合的小提琴： http ： //jsfiddle.net/trixta/jkQEX/

如果你想拥有这个跨浏览器，你可以简单地使用webshims lib进行polyfill 。 这是一个x浏览器示例： http ： //jsfiddle.net/trixta/RN8PA/

Answer 2

由于在提交表单时总是添加这些类，因此在验证之前删除该类：

$('#myForm').submit(function(){
    $('.invalid', this).removeClass('invalid'); // Remove all invalid classes
    $(this).removeClass('invalid');             // If the parent = form.
    // Normal validation procedure.
});

预期结果：

1. 用户启动submit
2. 触发onsubmit >删除表单中的所有invalid类名。
3. 触发invalid事件，并在必要时添加invalid类

更新

为你的小提琴添加了一个额外的块，请参阅更新的小提琴： http ： //jsfiddle.net/ceArQ/10/ 。 我已经实现了checkValidity()方法和validity.valid属性。 现在，当输入无效时，将自动添加类。

document.addEventListener('keyup', function(e){
    var input = e.target;
    if (!$.nodeName(input, 'input')) return;
    input.checkValidity();
    var element = $(input).parent();
    if(input.validity.valid) {
        element.removeClass('invalid');
        element.parent().removeClass('invalid');
    } else { //Remove the lines below if you don't want to automatically add
             // classes when they're invalid.
        element.addClass('invalid');
        element.parent().removeClass('invalid');
    }
});

在键入时，检查输入元素的有效性。 如果它有效，则从其父级中删除invalid类。

Answer 3

您可以将验证逻辑绑定到focus和blur事件，或者对keyup事件更具响应性。

$('input').keyup(function() {
    if(isValid(this)) {
        $(this).removeClass('invalid').parent().removeClass('invalid');
        $(this).addClass('valid').parent().addClass('invalid');
    }
    else {
        $(this).removeClass('valid').parent().removeClass('valid');
        $(this).addClass('invalid').parent().addClass('invalid');
    }
});

Answer 4

您是否尝试过使用:valid表示字段是否有效。 并且具有无效的表单只保留其默认样式。

然后在提交处理程序中调用form.checkValidity() ？ （然后，浏览器应该告诉最终用户哪个表单元素无效）。