Question

如果您的表单包含多个步骤，但只有一个提交按钮，是否可以仅对隐藏的部分运行验证，即使您在步骤之间导航也是如此？

我知道默认会忽略:hidden，这很棒。但是，如果我导航到另一个＆＃39;部分＆＃39;在表单中，然后再次单击“提交”，它不会忽略现在位于隐藏部分的已经验证的字段。

即使您已经验证了上一部分，我也只想验证您所在的部分。在下面的小提琴中，如果您在第一步提交时，它将对其进行验证。如果你转到第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>

CSS隐藏我不想验证的部分：

.Form_section {
    display: none;
    &.js-active {
        display: block;
    }
}

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();

Answer 1

我一开始没有看到它，但一个主要问题是您错过了name元素上的input属性。通常，当name属性缺失（或不唯一）时，只会验证第一个元素。

每个输入必须具有唯一 name属性才能使此插件正常运行。这是插件如何跟踪输入。

已更新：http://jsfiddle.net/effx3p45/16/

jQuery validate - 只有1个按钮的multistep，忽略不起作用

1 个答案: