html5 触发 jquery 事件所需的属性

Question

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

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

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

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

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

Answer 1

查看如何使用 :invalid 伪 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>

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

Answer 2

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

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

html5 触发 jquery 事件所需的属性

html5 required attribute to fire jquery event

html

javascript

forms

jquery

required