HTML5 required属性如何触发jQuery事件？

Question

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

该表单分为两个选项卡，称为“常规详细信息”和“附加详细信息”。因此，在提交表单时，如果我在可见选项卡上留空必填字段，则用户可以查看消息。但是，假设用户在第一个选项卡上，错误出现在第二个选项卡上，那么用户将无法查看错误弹出窗口，也不知道为什么表单无法提交。

现在，我正在寻找一种jQuery事件触发的方法，每当必需属性错误出现时。

因此，在此事件上，我可以编程以显示出现错误的选项卡。

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

- Chetan

---

无效的HTML字段会得到“:invalid”伪类，你可能可以利用它来解决问题？ - user3154108

谢谢您的快速回复。但很抱歉，它不适用于“required”属性。如果我们在字段中输入错误数据（例如type="email"中的abc），则:invalid会起作用。链接- http://davidwalsh.name/demo/valid-pseudo-class.php - Chetan

一旦必填字段尝试提交或失去焦点，没有值，则确实会在:required伪类旁边得到:invalid伪类。这很有道理，因为没有值的必填字段是无效的。 - user3154108

Answer 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>

您可以简单地检查字段的可见性，如果未给出，则向上遍历到父选项卡，并将父选项卡赋予一个类，该类将选项卡标签标记为包含无效内容。

- user3154108

---

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

Answer 2

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

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

- Raghav Simlote