0

我正在尝试创建自己的基本表单验证，而不必求助于繁重的、千篇一律的插件，并且我编写了以下代码。无论我多久重写一次并重新开始，我似乎都无法让它工作。

这个想法是脚本检查表单以查看是否所有字段都已完成，如果已完成，它会从提交按钮中删除 disabled 属性。

功能：-

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();
    }
})

我整天都在搞这个，并且正在努力通过谷歌找到答案。

4

4 回答 4

1

由于您在 .each() 的匿名函数中创建了“已检查”变量，因此已检查变量在该函数之外无法用于您的 if(checked == true) 测试（您会得到“已检查未定义”错误），这就是您的警报没有触发的原因。

尝试首先在匿名函数之外定义“检查”变量，然后相应地更新它。

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/

于 2012-05-11T13:59:38.013 回答
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();
    }
})
于 2012-05-11T14:07:28.233 回答
0

您可以为此使用 jquery.validate() 函数，其参考 URL 为：http ://docs.jquery.com/Plugins/Validation

于 2012-05-11T13:49:30.553 回答
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();
}
})
于 2012-05-11T13:51:06.373 回答