html5必需属性来触发jquery事件

Question

我正在制作一个表单,我在其中使用required了元素的属性.现在考虑以下情况 -

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

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

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

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

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>

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