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

私は一日これでぐちゃぐちゃしてきたし、Google経由で答えを見つけるのに苦労しています。

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 
    } 
} 

AND関数を呼び出すための

$('#contact :input').on('blur', function(){ 
    if (!$.trim($(this).val()).length){ 
     $(this).next('.error').show(); 
    } else { 
     $(this).next('.error').hide(); 
     checkForm(); 
    } 
}) 

Answer 2

あなたはこのためにjquery.validate（）関数を使用することができますし、その参照URLは次のとおりです。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（）の匿名関数の中で変数 'c​​hecked'が使用されている場合、チェックされた変数は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/