如果字段无效,我的代码基本上会添加一个类错误,如果该字段有效,则删除错误类并正常提交表单。
我无法找出我创建的表单验证代码的两个小错误。
下面列出了错误:
1) 如果您在一个字段中输入正确的内容,然后单击提交,则错误类的长度不会在第一次提交单击时更新。需要点击两次提交才能更新长度。 (查看console.log)
2) 如果您更改输入字段的内容并单击提交(一切正常,错误类别已删除),但如果您决定删除更新的文本并将字段留空,则错误类别不会重新生成已应用。
如果我能得到一些帮助来解决这个问题,那就太好了。
如果有任何不清楚的地方,请告诉我。
提前致谢: JSFIDDLE
$('form.requiredFields').submit(function(e) {
var req = $(this).find('.req'),
validateEmail = function(email) {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
};
req.each(function() {
var $this = $(this),
defaultVal = $this.prop('defaultValue'); //cache default val
//checks for validation errors
if ( ( $this.hasClass('email') && !validateEmail( $this.val() ) ) ||
( defaultVal === $this.val() || $this.val() === '' || $this.val().length < 3 )
)
{
$this.addClass('error');
} else {
$this.removeClass('error req');
}
});
console.log(req.length);
if ( req.length === 0 ) {
return true;
} else {
return false;
}
});
最佳答案
就像 dc5 所说的#2 一样,不要删除 req 类。
对于 #1 - 您需要在删除错误 (.req) 之前查找错误。
查看此工作 fiddle 。这是您的代码如何工作的示例,但也许您可以找到更清晰的解决方案。
$('form.requiredFields').submit(function(e) {
var req = $(this).find('.req'), errorCheck = 0,
validateEmail = function(email) {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
};
req.each(function() {
var $this = $(this),
defaultVal = $this.prop('defaultValue'); //cache default val
//checks for validation errors
if ( ( $this.hasClass('email') && !validateEmail( $this.val() ) ) ||
( defaultVal === $this.val() || $this.val() === '' || $this.val().length < 3 )
)
{
$this.addClass('error');
} else {
$this.removeClass('error');
}
});
errorCheck = $(this).find('.error');
console.log(errorCheck.length);
if ( errorCheck.length === 0 ) {
return true;
} else {
return false;
}
});
关于javascript - 如何修复 jQuery 表单验证代码的两个错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17821681/