GlobalEventHandlers.oninvalid

这篇翻译不完整。请帮忙从英语翻译这篇文章

GlobalEventHandlers 混合的oninvalid属性 是 EventHandler 处理invalid 事件。

invalid 事件被触发当一个从属元素被勾选checked 并且与之前的选中方式不同。 有效的从属元素在表单之前被选中, 或者在 checkValidity() 方法之后它自己的表单被调用。

语法

target.oninvalid = functionRef;
var functionRef = target.oninvalid;

functionRef是一个函数名称 或者 称为 函数表达式。这个函数需要Event 对象做为它的参数。

例子

这个例子用一个表单说明oninvalidonsubmit 事件 句柄。

HTML

<form id="form">
  <p id="error" hidden>Please fill out all fields.</p>

  <label for="city">City</label>
  <input type="text" id="city" required>

  <button type="submit">Submit</button>
</form>
<p id="thanks" hidden>Your data has been received. Thanks!</p>

JavaScript

const form = document.getElementById('form');
const error = document.getElementById('error');
const city = document.getElementById('city');
const thanks = document.getElementById('thanks');

city.oninvalid = invalid;
form.onsubmit = submit;

function invalid(event) {
  error.removeAttribute('hidden');
}

function submit(event) {
  form.setAttribute('hidden', '');
  thanks.removeAttribute('hidden');

  // For this example, don't actually submit the form
  event.preventDefault();
}

结果

说明

说明 状态 注释
HTML Living Standard
oninvalid
Living Standard  

支持的浏览器

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
oninvalidChrome Full support YesEdge ? Firefox Full support YesIE ? Opera Full support YesSafari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support YesOpera Android Full support YesSafari iOS ? Samsung Internet Android Full support Yes

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

请参阅

文档标签和贡献者

此页面的贡献者: mdnwebdocs-bot, chenqingyue
最后编辑者: mdnwebdocs-bot,