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

For the moment, the wrong format just take the red color ...

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

Now I want to forbid next step if the input is not on the right format.

由于此字段上的 class="required"，您只有 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/

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

jQuery Steps stop next step if the input is not valid

jquery

jquery-validate

jquery-steps