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/

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

1 个答案: