我有一个简单的表单与 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
}
});
1 回答
那是因为你没有在表格评估的这一部分使用验证插件。出于某种原因,您创建了一个事件处理程序,以完全在验证插件的参数之外执行此操作。
由于此字段上的
class="required"
,您只有required
规则,验证插件会自动获取该规则。因此,一旦填写完毕,验证插件就会得到满足并允许下一步。要验证此字段的其他任何内容,您需要通过此插件中内置的方法应用适当的规则。您不能只使用keyup
事件将其着色为红色,并期望验证插件可以执行任何操作。这就是问题......
使用自定义
keyup
函数,您基本上只是在进行自己的验证测试并更改颜色。 ←你期望验证插件如何处理?删除
keyup
功能。正确的方法是在验证插件中编写自定义规则或使用 built-in 规则,然后一切都将按预期工作。
注意:要使用
pattern
,规则,您必须包含additional-methods.js
文件。工作演示:jsfiddle.net/j8n0o9ty/