我正在尝试创建自己的基本表单验证,而不必使用繁重的,一刀切的插件,并且我编写了以下代码。我重写它并重新开始的频率并不重要,我似乎无法让它发挥作用。
这个想法是脚本检查表单以查看是否所有字段都已完成,如果是,则从提交按钮中删除已禁用的属性。
功能: -
function checkForm(){
$('#contact :input').each(function(){
if($(this).attr('value') == null){
var checked = false;
} else {
var checked = true;
}
})
if (checked == true){
alert('all filled in');
//remove disabled attribute from button
} else {
alert('not completed');
//add disabled attribute to button
}
}
调用该函数的代码: -
$('#contact :input').blur(function(){
if ($(this).val() <= ''){
$(this).next('.error').show();
} else {
$(this).next('.error').hide();
checkForm();
}
})
我一整天都在搞乱这件事,我很难通过谷歌找到答案。
答案 0 :(得分:1)
由于您正在创建“已检查”状态。在.each()的匿名函数内部的变量,对于你的if(checked == true)测试,你检查的变量在该函数之外是不可用的(你得到了一个未经过检查的&#39;错误),这是为什么你的警报没有被解雇。
首先尝试定义&#39;已检查&#39;变量在匿名函数之外,然后相应地更新。
function checkForm() {
var checked = true;
$('#contact :input').each(function () {
if ($(this).val() == '') {
checked = false;
}
})
if (checked == true) {
alert('all filled in');
//remove disabled attribute from button
} else {
alert('not completed');
//add disabled attribute to button
}
}
$('#contact :input').blur(function () {
if ($(this).val() == '') {
$(this).next('.error').show();
} else {
$(this).next('.error').hide();
checkForm();
}
})
这是一个jsFiddle示例。 http://jsfiddle.net/DMLzK/1/
答案 1 :(得分:1)
function checkForm(){
var checked = true;
$('#contact :input').each(function(){
if(!$.trim($(this).val()).length) checked = false;
})
if (checked){
alert('all filled in');
//remove disabled attribute from button
} else {
alert('not completed');
//add disabled attribute to button
}
}
并调用该函数
$('#contact :input').on('blur', function(){
if (!$.trim($(this).val()).length){
$(this).next('.error').show();
} else {
$(this).next('.error').hide();
checkForm();
}
})
答案 2 :(得分:0)
您可以使用jquery.validate()函数,其参考网址为:http://docs.jquery.com/Plugins/Validation
答案 3 :(得分:0)
更正:
function checkForm(){
$('#contact :input').each(function(){
if($(this).val() == ''){
var checked = false;
} else {
var checked = true;
}
})
if (checked == true){
alert('all filled in');
//remove disabled attribute from button
} else {
alert('not completed');
//add disabled attribute to button
}
}
和
$('#contact :input').blur(function(){
if ($(this).val() == ''){
$(this).next('.error').show();
} else {
$(this).next('.error').hide();
checkForm();
}
})