Html5所需属性，用于触发jquery事件

html5 required attribute to fire jquery event

本文关键字：jquery 事件 用于 属性 Html5      更新时间：2023-09-26

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

表格分为两个选项卡，分别是General Details和Additional Details。因此，在提交表单时，如果我在可见选项卡上留下所需字段空白，则用户可以查看消息。但是假设用户在第一个选项卡上，错误出现在第二个选项卡上，那么用户无法查看错误弹出框，他也不知道为什么表单没有提交。

现在我正在寻找一种方式一个jQuery事件可以被触发，每当所需的属性错误来。

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

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

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

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

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

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

相关文章：