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/