jquery基本表单验证

Question

我想创建我自己的基本表单验证，而不必诉诸重型的，一刀切的插件，我写了下面的代码。似乎没有多少时间我重写它，并重新开始，我似乎无法让它工作。

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

的功能： -

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

我一直是这样折腾了一整天，我在努力找到通过谷歌的答案。

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

Answer 2

你可以使用jquery.validate（）函数，这和它的参考网址是：http://docs.jquery.com/Plugins/Validation

Answer 3

修正：

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

Answer 4

既然你正在创建的“检查.each（）的匿名函数内的变量，检查的变量在该函数外部对于if（checked == true）测试是不可用的（您会得到'checked is undefined'错误）这就是为什么你的警报不会触发。

尝试先在匿名函数外定义'checked'变量，然后相应地更新它。

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/