如果输入无效，jQuery步骤将停止下一步

Question

我有一个简单的表单与jquery步骤和jquery验证。

我有很多具有特定格式的字段（例如：只接受其中一个数字/^(6|8|10|12)$/)。

我正在使用正则表达式来检查输入格式，以便用户知道出现了问题。目前，错误的格式只是采用红色，但按下一步，用户可以进入下一步。

现在，如果输入的格式不正确，我想禁止下一步。

这是用笔来说明https://codepen.io/zounars/pen/MZYxKB的形式

<!-- Thanks to Pieter B. for helping out with the logistics -->
<div class="container">
<form id="contact" action="#">
<div>
    <h3>Account</h3>
    <section>
        <label for="userName">User name *</label>
        <input id="userName" name="userName" type="text" class="required">
        <label for="specialNumber">Special number *</label>
        <input id="specialNumber" name="specialNumber" type="text" class="required">
        <p>(*) Mandatory</p>
    </section>

    <h3>Profile</h3>
    <section>
        <label for="name">First name *</label>
        <input id="name" name="name" type="text" class="required">
        <label for="surname">Last name *</label>
        <input id="surname" name="surname" type="text" class="required">
        <p>(*) Mandatory</p>
    </section>
    <h3>Hints</h3>
    <section>
        <ul>
            <li>Foo</li>
            <li>Bar</li>
            <li>Foobar</li>
        </ul>
    </section>
    <h3>Finish</h3>
    <section>
        <input id="acceptTerms" name="acceptTerms" type="checkbox" class="required"> <label for="acceptTerms">I agree with the Terms and Conditions.</label>
    </section>
</div>

var form = $("#contact");
form.validate({
errorPlacement: function errorPlacement(error, element) { element.before(error); },
rules: {
    confirm: {
        equalTo: "#password"
    }
}
});
form.children("div").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
onStepChanging: function (event, currentIndex, newIndex)
{

    form.validate().settings.ignore = ":disabled,:hidden";
    return form.valid();

},
onFinishing: function (event, currentIndex)
{
    form.validate().settings.ignore = ":disabled";
    return form.valid();
},
onFinished: function (event, currentIndex)
{
    alert("Submitted!");
}
});

$('#specialNumber').on('keyup', function (e) {
    if (!this.value.match(/^(6|8|10|12)$/)) {       
        $(this).addClass('error-color'); // adding error class
    } else {
        $(this).removeClass('error-color'); // remove error class
    }
});

Answer 1

目前，错误的格式只是采取红色...

那是因为你没有在表格评估的这一部分使用验证插件。出于某种原因，您创建了一个事件处理程序，以完全在验证插件的参数之外执行此操作。

现在，如果输入的格式不正确，我想禁止下一步。

由于required在此字段上只有class="required"规则，因此验证插件会自动获取该规则。因此，一旦填写完毕，验证插件就会得到满足并允许下一步。要验证此字段的其他任何内容，您需要通过此插件中内置的方法应用适当的规则。您不能只使用keyup事件将其着色为红色，并期望验证插件可以执行任何操作。

这就是问题......

$('#specialNumber').on('keyup', function (e) {
    if (!this.value.match(/^(6|8|10|12)$/)) {       
        $(this).addClass('error-color'); // adding error class
    } else {
        $(this).removeClass('error-color'); // remove error class
    }
});

使用您的自定义keyup函数，您基本上只是在进行自己的验证测试并更改颜色。 ←你期望验证插件如何处理？

删除你的keyup功能。

正确的方法是在验证插件中编写自定义规则或使用内置规则，然后一切都将按预期工作。

rules: {
    ... 
    specialNumber: {
        pattern: /^(6|8|10|12)$/  // <- use the pattern rule for regex
    }
    ....

注意：要使用pattern规则，您必须包含additional-methods.js文件。

工作演示：jsfiddle.net/j8n0o9ty/