Jquery在可访问的多步骤表单上验证

Posted 2023-05-08

【中文标题】Jquery在可访问的多步骤表单上验证

【英文标题】：Jquery validate on accessible multi step form

【发布时间】：2017-08-04 16:51:51

【问题描述】：

我正在尝试创建一个简单的多步骤联系表单，该表单可以很好地与屏幕阅读器配合使用，并在每个步骤中使用 Jquery Validate 插件。

我有一个脚本可以改变焦点并为屏幕阅读器用户宣布一个新页面，该页面运行良好。但是，我在使用验证脚本时遇到了麻烦。它在第 1 步工作，但在第 2 步和第 3 步被绕过。

下一个按钮也需要两次点击而不是一次。谁能告诉我哪里出错了？以下是我设置验证的方式。

$(".next").click(function() 
var form = $("#contact-multi");
form.validate(
  errorClass: 'help-block',
  highlight: function(element, errorClass, validClass) 
    $(element).closest('.form-group').addClass("has-error");
  ,
  unhighlight: function(element, errorClass, validClass) 
    $(element).closest('.form-group').removeClass("has-error");
  ,
  errorPlacement: function(error, element) 
    if (element.prop('type') === 'radio' || element.prop('type') === 'checkbox') 
      error.insertBefore(element.parent());
     else 
      error.insertBefore(element);
    
  
);
  if (form.valid() === true)  // If statement here?



  
);

这里正在进行中：

https://jsfiddle.net/ldigital/8b3rwobk/2/

【参考方案1】：

使用表单向导和 jquery 验证插件

【参考方案2】：

尝试以不同的形式创建每个部分并在不同的脚本标签中为每个表单调用 .validate()。尝试验证表单数据。