jquery - 输入为空时发出警报

Question

我有一个表格，我希望填写所有字段。如果未填写某个字段，我想显示该字段的红色背景和一条消息。

    \$('#id_form').blur(function()
    {
        if( $(this).val().length == 0 ) {
            $(this).parents('p').addClass('warning');
        }

print $q->start_form (-method => 'post', -action => "add.pl", -id => 'id_form');
print $q->legend({-class => "ui-widget-header ui-corner-all"},"");
print $q->input ({-id => 'name', -name => 'name',-type => 'text' , -size => 20, -style => ' margin-left:300 px' },"<br>");

我不确定这是正确的方法！

Answer 1

您必须将元素绑定到 DOM。您可以使用$(document).ready(), 或使用 jQuery 的匿名函数，如下所示：

$(function () {
    $('#id_form').blur(function () {
        if ($(this).val().length == 0) {
            $(this).parents('p').addClass('warning');
        };
    });
});

Answer 2

我使用这个带有按钮的 Jquery 函数来检查是否所有字段都已填写：

    function check(){

    var ok = 1;

    $('input').each(function(){

    if($(this).val().length == 0){ 
        ok = 0; $(this).css('background-color','red');
        alert("Error message"); 
    }

    else{ $(this).css('background-color',''); }
});

if(ok != 1){ alert("Error message"); }

else{ $('#form').submit(); }

}

也许这有帮助？

Answer 3

试试这个http://jsfiddle.net/tYhpw/

$('#id_form input').on('blur', function () {
    if( $(this).val() == '' ) {
        $(this).css('border','1px solid #f00');
    }else{
        $(this).css('border','1px solid #000');
    }
});