JQuery Kiểm tra xem đầu vào có trống không kiểm tra tải không?

Question

Tôi đang sử dụng mã này để kiểm tra xem hộp nhập liệu có trống hay không và nó hoạt động tốt nhưng nó chỉ kiểm tra xem một phím có được nhấn không khi trang tải.

Đó là những gì cần nhưng tôi cũng muốn nó kiểm tra trạng thái khi tải trang.

Đây là mã hiện tại:

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

Answer 1

Hãy thử như sau:

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

Answer 2

Vậy thì tại sao không chỉ cần kiểm tra sân sau khi trang web được tải?

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

Answer 3

hãy thử kiểm tra giá trị trên một tài liệu đã sẵn sàng:

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

EDIT: cũng giống như một bản cập nhật cho câu trả lời này, một cách tiếp cận đẹp hơn có thể sử dụng lớp chuyển đổi, thiết lập trong doc sẵn sàng sau đó kích hoạt sự kiện chạy trên tải trang.

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

Answer 4

Cách đơn giản nhất để làm là kích hoạt bất kỳ của KeyUp, KeyDown vv sự kiện trên tải trang. Sau đó nó sẽ tự động gọi handler cụ thể của bạn

$(document).ready(function(){ 
    $("#myID").trigger('keyup'); 
}); 

Answer 5

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