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 AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
oninvalidChrome Full support YesEdge Full support ≤79Firefox Full support YesIE ? Opera Full support YesSafari ? WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS ? Samsung Internet Android Full support Yes

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

请参阅