我的 JS 验证代码有问题。当我提交表单并且存在错误时,该表单不应再继续。但是,代码并没有停止,而是继续执行下一行,尽管仍然存在错误,但仍显示成功消息。
而且我已经清楚地写过,例如,如果该字段为空,则返回 false
...
为什么代码会继续到下一行,即使有 return false
?
按提交
,您就会明白我的意思。
JS:
(function(window, $) {
var Namespace = (function(Namespace) {
Namespace = {
// Main
run : function() {
this.validate.run('form');
},
// Validation
validate : {
// error message span
messageBox : '<span class="message" />',
// add any field here
fields : {
nameField : $('#contact-name'),
emailField : $('#contact-email'),
phoneField : $('#contact-phone')
},
// run validation
run : function(formName) {
$(formName).on('submit', $.proxy(this.validateField, this));
},
validateField : function() {
for (var field in this.fields) {
if (this.fields.hasOwnProperty(field)) {
this.checkField(this.fields[field]);
}
}
$('#general-message-section').text('Form successfully sent, thank you!');
return false;
},
checkField : function(field) {
var messageBox = $(this.messageBox);
field.closest('li').find('.message').remove();
if (field.hasClass('required')) {
if (!field.val()) {
messageBox.text('This field is empty!');
field.closest('li').append(messageBox);
return false;
}
}
if (this.fields.emailField.val()) {
this.fields.emailField.closest('li').find('.message').remove();
if (!this.fields.emailField.val().match(this.regEx.email)) {
messageBox.text('Only email format accepted!');
this.fields.emailField.closest('li').append(messageBox);
return false;
}
}
if (this.fields.phoneField.val()) {
this.fields.phoneField.closest('li').find('.message').remove();
if (!this.fields.phoneField.val().match(this.regEx.numbers)) {
messageBox.text('Only numbers are accepted!');
this.fields.phoneField.closest('li').append(messageBox);
return false;
}
}
},
regEx : {
email : /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/,
numbers : /^[0-9]+$/
}
}
};
return Namespace;
}(Namespace || {}));
// make global
window.Namespace = Namespace;
}(window, jQuery));
// run it...
Namespace.run();
HTML:
<p id="general-message-section"></p>
<form id="contact-form" method="post" action="#">
<fieldset>
<ul>
<li>
<label for="contact-name">Contact name *:</label>
<input type="text" id="contact-name" tabindex="1" class="required" autofocus />
</li>
<li>
<label for="contact-email">Contact email address *:</label>
<input type="text" id="contact-email" tabindex="2" class="required" />
</li>
<li>
<label for="contact-phone">Contact phone number:</label>
<input type="text" id="contact-phone" tabindex="3" />
</li>
<li>
<input type="submit" id="submit-btn" tabindex="4" value="Submit" />
</li>
</ul>
</fieldset>
</form>
非常感谢
最佳答案
我猜您缺少验证逻辑检查。您的代码:
validateField : function() {
for (var field in this.fields) {
if (this.fields.hasOwnProperty(field)) {
this.checkField(this.fields[field]);
}
}
$('#general-message-section').text('Form successfully sent, thank you!');
return false;
},
确实调用checkField
,但不检查其结果(可能为假)。我想你可能有这样的东西:
validateField : function() {
for (var field in this.fields) {
if (this.fields.hasOwnProperty(field)) {
if(!this.checkField(this.fields[field])) {
alert("There are errors!");
return false;
}
}
}
$('#general-message-section').text('Form successfully sent, thank you!');
return false;
},
当然,如果正确(在最后),则在 checkField
中返回 true;
,否则它也不会工作。
关于JavaScript 验证未按预期执行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16403210/