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

Question

我有一个简单的表单，包含jquery步骤和jquery验证。

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

我使用regex来检查输入格式，以便用户知道有什么问题。目前，错误的格式只是采用红色，但按下next，用户可以进入下一步。

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

这是用来说明形式的钢笔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

目前，错误的格式只是采用了红色

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

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

由于此字段上有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/