jQuery validate-只包含1个按钮的多步骤，忽略不'；行不通

如果您有一个包含多个步骤但只有一个提交按钮的表单，那么即使您从一个步骤导航到另一个步骤，是否可以仅对隐藏的部分运行验证

我知道默认情况下它会忽略

：hidden

，这很好。但是，如果我导航到表单的另一个“部分”，然后再次单击“提交”，它将不会忽略隐藏部分上已验证的字段

我只想验证您所在的部分，即使您已经验证了以前的部分。在下面的提琴中，如果您在第一步提交，它将验证它。如果您接着转到步骤2，它不会只验证步骤2，它仍然认为步骤1需要修复

一些上下文：计划最终是标记某个节无效，并将“无效”类应用于特定步骤。但是，用户可以随时处理任何步骤，因为它不一定是线性的。正因为如此，我需要每个部分完全独立地进行验证，但我不想要4种不同的表单（无法控制）

---

HTML

<ul id="Steps">
    <li><a href="#FormSignup_section1">Step 1</a></li>
    <li><a href="#FormSignup_section2">Step 2</a></li>
    <li><a href="#FormSignup_section3">Step 3</a></li>
    <li><a href="#FormSignup_section4">Step 4</a></li>
</ul>
<form class="Form Form--signup" id="FormSignup">
    <fieldset id="FormSignup_section1" class="Form_section js-active">
        <h3>Step 1</h3>
        <div class="Form_field">
            <label>Text Input <abbr title="Required">*</abbr></label>
            <div class="Form_input">
                <input type="text" placeholder="Text Input" required>
            </div>
        </div>
        <div class="Form_field">
            <label>Text Input</label>
            <div class="Form_input">
                <input type="text" placeholder="Text Input">
            </div>
        </div>
    </fieldset>
    <fieldset id="FormSignup_section2" class="Form_section">
        <h3>Step 2</h3>
        <div class="Form_field">
            <label>Text Input <abbr title="Required">*</abbr></label>
            <div class="Form_input">
                <input type="text" placeholder="Text Input" required>
            </div>
        </div>
        <div class="Form_field">
            <label>Text Input</label>
            <div class="Form_input">
                <input type="text" placeholder="Text Input">
            </div>
        </div>
    </fieldset>
    <fieldset id="FormSignup_section3" class="Form_section">
        <h3>Step 3</h3>
        <div class="Form_field">
            <label>Text Input <abbr title="Required">*</abbr></label>
            <div class="Form_input">
                <input type="text" placeholder="Text Input" required>
            </div>
        </div>
        <div class="Form_field">
            <label>Text Input</label>
            <div class="Form_input">
                <input type="text" placeholder="Text Input">
            </div>
        </div>
    </fieldset>
    <fieldset id="FormSignup_section4" class="Form_section">
        <h3>Step 4</h3>
        <div class="Form_field">
            <label>Text Input <abbr title="Required">*</abbr></label>
            <div class="Form_input">
                <input type="text" placeholder="Text Input" required>
            </div>
        </div>
        <div class="Form_field">
            <label>Text Input</label>
            <div class="Form_input">
                <input type="text" placeholder="Text Input">
            </div>
        </div>
    </fieldset>
    <div class="ControlBar">
        <button type="submit" id="FormSignup_submit" class="Btn Btn--alpha Btn--m">Submit</button>
    </div>
</form>

JS：控制步骤，然后验证表单

var stepLink = $('#Steps a');
var form = $('#FormSignup');

stepLink.on('click', function(e) {
    var url = $(this).attr('href');
    e.preventDefault();
    form.find(url).addClass('js-active').siblings('.Form_section').removeClass('js-active');
});

form.validate();

---

一开始我没有看到它，但一个主要问题是

input

元素缺少

name

属性。通常，当

name

属性丢失（或不唯一）时，只验证第一个元素

每个输入必须具有唯一的

名称

属性，才能使该插件正常运行。这就是插件跟踪输入的方式

---

更新：

如果你不能将这些步骤分解成单独的

表单

容器，那么整个过程将变得更加复杂和难以处理。我不确定我是否理解你的JSFIDE。它似乎起作用，但由于你看不到隐藏的台阶上发生了什么，所以无法判断。它在做什么不该做的事？是否要忽略隐藏的部分。。。在这方面，您的前两段有误导性。“是否可以只对隐藏的部分运行验证？”~这是您的根本问题吗？您可以将

ignore

选项设置为任何您想要的选项，包括使用

ignore:[]

@Sparky完全禁用它，谢谢您的反馈。我遇到的问题是，如果在第1步按submit，它将验证第1步。如果随后导航到步骤2并按submit，则即使步骤1现在已隐藏，也不会验证步骤2。有意义吗？您已经破坏了插件，因为在每个输入上都没有

名称

属性。

var stepLink = $('#Steps a');
var form = $('#FormSignup');

stepLink.on('click', function(e) {
    var url = $(this).attr('href');
    e.preventDefault();
    form.find(url).addClass('js-active').siblings('.Form_section').removeClass('js-active');
});

form.validate();