2012-01-13 18 views
5

私はこのコードを使用して入力ボックスが空であるかどうかをチェックしていますが、うまくいきますが、ページが読み込まれたときにキーが押されていないことを確認します。JQueryオンロードをチェックしていない入力が空であるかどうかを確認しますか?

これはすべきことですが、ページが読み込まれたときの状態も確認したいと思います。ここで

現在のコードされています

$('#myID').on('keyup keydown keypress change paste', function() { 
    if ($(this).val() == '') { 
    $('#status').removeClass('required_ok').addClass('ok'); 
    } else { 
    $('#status').addClass('required_ok').removeClass('not_ok'); 
    } 
}); 

答えて

6

は、以下のことを試してみてください。

$(function() { 
    var element = $('#myID'); 
    var toggleClasses = function() { 
    if (element.val() == '') { 
     $('#status').removeClass('required_ok').addClass('ok'); 
    } else { 
     $('#status').addClass('required_ok').removeClass('not_ok'); 
    } 
    }; 
    element.on('keyup keydown keypress change paste', function() { 
    toggleClasses(); // Still toggles the classes on any of the above events 
    }); 
    toggleClasses(); // and also on document ready 
}); 
+0

これは私が答えたものを、それを行うには、もっと良い方法があります – atmd

2

さて、なぜページがロードされた後だけでフィールドをチェックしていけませんか?

$(document).ready(function(){ 
    if ($('#myID').val() == '') { 
    $('#status').removeClass('required_ok').addClass('ok'); 
    } else { 
    $('#status').addClass('required_ok').removeClass('not_ok'); 
    } 
}); 
3

準備ドキュメントに値をチェックしてみてください:

$(function() { 
    if ($('#myID').val() == '') { 
     $('#status').removeClass('required_ok').addClass('ok'); 
    } else { 
     $('#status').addClass('required_ok').removeClass('not_ok'); 
    } 
}); 

EDIT:この回答への更新は、よりよいアプローチはトグルクラスを使用するかもしれないと同じように、その後、準備ができてドキュメントトリガーに設定ページロード時に実行するイベント。

function check() { 
    var $status = $('#status'); 

    if ($(this).val()) { 
     $status.toggleClass('required_ok').toggleClass('ok'); 
    } else { 
     $status.toggleClass('required_ok').toggleClass('not_ok'); 
    } 
} 


$(function() { 
    $('#myID').on('keyup keydown keypress change paste', check); 
    $('#myID').trigger('change'); 
}); 
3

行う最も簡単な方法は、ページのロードのからkeyup、KeyDownイベントなどのイベントのいずれかをトリガです。その後、自動的に特定のハンドラを呼び出します

$(document).ready(function(){ 
    $("#myID").trigger('keyup'); 
}); 
2
$(document).ready(function(){ 
var checkVal = $("myID").val(); 
if(checkVal==''){ 
$('#status').removeClass('required_ok').addClass('ok'); 
} 
else{ 
$('#status').addClass('required_ok').removeClass('not_ok'); 
} 
}); 
関連する問題