在验证输入字段之前引发HTML5表单中的事件。 [英] Event in HTML5 form raised before validation of input fields.

问题描述

在HTML5表单中的字段验证之前以及提交此表单之前是否有任何事件被提出？

AFAIK，提交事件就在之前提出提交表格，但在验证步骤之后，这对我来说太晚了。

更新：我有一个textarea required属性，如果用户有JS，我想用HTML编辑器替换它。 HTML编辑器将其内容与提交时的textarea同步（在验证步骤之后），因此对于浏览器，textarea始终为空。这就是我要求在验证之前触发事件的原因。解决此问题的任何其他方式答案都将被接受。

解决方案

不，在验证发生之前没有事件触发。只有无效事件，在验证无效字段后但在显示验证UI之前触发（防止默认设置阻止显示浏览器验证UI）。 / p>

如果要同步两个字段，则必须使用两个事件。第一个是 DOMContentReady ，第二个是更改事件。

其他信息：如果隐藏无效字段元素，则浏览器无法向用户显示验证消息。您可以使用以下代码解决此问题（请注意，这假设您使用的是jQuery 1.6x和特殊结构）：

  $ （'textarea.wysiwyg'）。bind（'invalid'，function（e）{
 //删除验证泡泡
 e.preventDefault（）; 
 //实现自己的验证UI 
 $（this）.next（'div.wysiwyg'）。after（'< p class =error>'+ $ .prop（this，'validationMessage'）+'< / p>' ）; 
}）; 
  

Is there any event raised before the validation of fields in an HTML5 form and before the submit of this form?

AFAIK, the submit event is raised just before the submit of the form, but after the validation step, so this one fires too late for me.

Update: I have a textarea with the "required" property, and if the user has JS I want to substitute it by an HTML editor. The HTML editor syncs its contents with the textarea on submit (after the validation step), so for the browser the textarea is always empty. That's why I'm asking for an event fired before the validation. Any other way answer that solves this problem will be accepted.

解决方案

No, there is no event which fires before validation happens. There is only the invalid event, which is fired after validation of an invalid field, but before the validation UI is shown (preventing the default prevents showing the browser validation UI).

In case you want to sync two fields, you have to use two events. The first is DOMContentReady and the second is the change event.

Additional info: if you hide the invalid field element, the browser can not show the validation message to the user. You can workaround this with the following code (note this assumes that you are using jQuery 1.6x and a special structure):

$('textarea.wysiwyg').bind('invalid', function(e){
    //remove validation bubble
    e.preventDefault();
    //implement your own validation UI
    $(this).next('div.wysiwyg').after('<p class="error">'+ $.prop(this, 'validationMessage') +'</p>');
});

这篇关于在验证输入字段之前引发HTML5表单中的事件。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！