Question

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

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

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

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

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

Answer 1

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

＆＃13;

jQuery(document).ready(function(){

  jQuery('button').on('click',function(){
    jQuery('input:invalid').css('background-color', '#F00');
    });
});

＆＃13;

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

＆＃13;

您只需检查字段可见性，如果没有遍历到父标签，请为父标签指定一个类，该标记标签标签包含无效的内容。

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事件

2 个答案: