--- title: GlobalEventHandlers.oninvalid slug: Web/API/GlobalEventHandlers/oninvalid tags: - API - GlobalEventHandlers - 事件句柄 - 属性 - 引用 translation_of: Web/API/GlobalEventHandlers/oninvalid ---
{{ ApiRef("HTML DOM") }}

{{domxref("GlobalEventHandlers")}} 混合的oninvalid属性 是 {{event("Event_handlers", "event handler")}} 处理{{event("invalid")}} 事件。

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

语法

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

值

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

例子

这个例子用一个表单说明oninvalid 和 {{domxref("GlobalEventHandlers.onsubmit", "onsubmit")}} 事件 句柄。

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();
}

结果

{{EmbedLiveSample("Example")}}

说明

说明 状态 注释
{{SpecName('HTML WHATWG','#handler-oninvalid','oninvalid')}} {{Spec2('HTML WHATWG')}}  

支持的浏览器

{{Compat("api.GlobalEventHandlers.oninvalid")}}

请参阅