html5 触发 jquery 事件所需的属性答案

【问题标题】：html5 required attribute to fire jquery eventhtml5 触发 jquery 事件所需的属性
【发布时间】：2015-08-17 10:07:50
【问题描述】：

我正在制作一个表单，其中我在其元素上使用required 属性。现在考虑以下情况-

表单分为两个选项卡，例如 General Details 和 Additional Details。因此，在提交表单时，如果我在可见选项卡上将必填字段留空，则用户可以查看该消息。但是假设用户在第一个选项卡上并且错误出现在第二个选项卡上，那么用户无法查看错误弹出窗口，并且他对表单未提交的原因一无所知。

现在我正在寻找一种方法，只要出现所需的属性错误，就可以触发 jQuery 事件。

所以在这个事件中，我可以编程显示错误所在的选项卡。

请注意，我知道我可以使用基于 JS/jQuery 的表单验证，但主要的是，这个表单是由 Grails 生成的，并且必填字段会根据数据库自动应用。所以我不能使用基于表单的 JS 验证。

【问题讨论】：

invalid html 字段确实得到了 :invalid 伪类，你可以用它来解决问题吗？
感谢您的快速回复。但很抱歉，它不适用于required 属性。如果我们在 abc 内的 type="email" 之类的字段中输入错误的数据，:invalid 就会起作用。链接-davidwalsh.name/demo/valid-pseudo-class.php
一旦必填字段尝试提交或失去焦点而没有值，它确实会在 :required 伪类旁边获得 :invalid 伪类。这是有道理的，因为没有值的必填字段是无效的。

标签： javascript jquery html forms required

【解决方案1】：

查看如何使用 :invalid 伪类选择必填字段：

jQuery(document).ready(function(){

  jQuery('button').on('click',function(){
    jQuery('input:invalid').css('background-color', '#F00');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="required test">
  <input type="text" required="required" />
  <button>click</button>
</form>

您可以简单地检查字段可见性，如果没有给出遍历父选项卡，则为父选项卡提供一个类，该类将选项卡标签标记为包含无效内容。

【讨论】：

谢谢！有效。我得到了所有 :invalid 元素，我可以遍历它们。再次感谢:-)

【解决方案2】：

一种方法是使用提交按钮并调用 JavaScript 的 myValidationFunction() 方法作为操作。 (action="myValidationFunction();").

其他方法是使用按钮并调用 JavaScript 的 myValidationFunction() 方法作为该按钮的 Click 事件。之后，在 myValidationFunction() 中，您可以使用 checkValidity() 方法一次检查表单或特定元素的有效性，如果有错误要显示给用户，则运行自定义代码以在特定选项卡上切换。 function myValidationFunction() { if ( $('#myInput')[0].checkValidity() ) { // code to move to the particular tab } }

【讨论】：