HTML | oninvalid 事件属性

在 HTML 中，oninvalid 事件属性用于定义当用户提交一个无效的表单时发生的操作。该属性需要与 HTML5 表单验证配合使用。

语法

<input oninvalid="action">

action 是当用户提交无效表单时要执行的操作，可以为 JavaScript 代码或者函数名称。

示例

<form>
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username" oninvalid="alert('请输入用户名')" required>
  <br>
  <label for="password">密码:</label>
  <input type="password" id="password" name="password" oninvalid="alert('请输入密码')" required>
  <br>
  <button type="submit">提交</button>
</form>

上述代码展示了一个简单的表单，包含用户名和密码两个输入框，以及一个提交按钮。输入框都需要使用 required 属性，并且在未填写时会触发 oninvalid 事件属性，弹出提示框提示用户输入。

注意事项

• oninvalid 事件属性只在表单提交时触发，不适用于单个输入框。
• 请确保在使用 oninvalid 前已经为表单添加了 HTML5 表单验证，否则该事件属性将无法生效。
• oninvalid 事件属性可以与其他事件属性如 oninput、onchange 搭配使用。

参考链接

• HTML5 Form Validation