必填字段和多步骤表单存在问题答案

【问题标题】：Trouble with required fields and multi step form必填字段和多步骤表单存在问题
【发布时间】：2014-10-24 08:50:14
【问题描述】：

我自己使用 jquery（隐藏和显示 div）完成的多步骤表单遇到了很大的麻烦

这是它的样子

我遇到的麻烦是具有“必需”属性的字段。事实上，所有表单都可以正常工作，但问题是在我单击 sublit 按钮之前它不会显示所需的内容。

当我们到达最后一页并提交时，它会想起一些输入丢失，下面是chrome控制台中的消息错误

An invalid form control with name='raison_sociale' is not focusable. index.php?p=demande-devis&categorie=professionnel&type=menuiserie:1
An invalid form control with name='nom' is not focusable. index.php?p=demande-devis&categorie=professionnel&type=menuiserie:1
An invalid form control with name='siret' is not focusable. index.php?p=demande-devis&categorie=professionnel&type=menuiserie:1
An invalid form control with name='prenom' is not focusable. index.php?p=demande-devis&categorie=professionnel&type=menuiserie:1
An invalid form control with name='no_tva' is not focusable.

我不知道如何在不验证表单的情况下检查所需属性，但在更改表单步骤之前...

我们将不胜感激。

【问题讨论】：

请发布您的代码，如果您创建一个jsFiddler会更好
我做不到，但我有一个链接到我的表单sp-batiment.com/…
问题是 id 只显示最后一个必需的输入，如果我在第一步确实有必需的输入，它就变成了，不需要。我的意思是，表格不关心是否需要。并且可以验证

标签： javascript jquery html forms

【解决方案1】：

您可以在进行下一步之前强制进行表单验证

例如

 if($("form")[0].checkValidity())
 {
   //Go to next step
 }

How to force a html5 form validation without submitting it via jQuery

出现错误是因为控件不可见

name='raison_sociale' 的无效表单控件

表示输入字段不可见，实际上

$("[name='raison_sociale']").is(":visible")

最后一步为假

希望对你有所帮助

【讨论】：