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
Basic supportChrome 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

请参阅

文档标签和贡献者

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