html5必需属性来触发jquery事件

Question

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

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

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

因此，在此事件中，我可以编程显示错误发生的选项卡。

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

Answer 1

查看如何使用：invalid pseudo class选择必填字段：

 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> 

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

Answer 2

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

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