Alert if input is empty

Question

I have a form that I would like all fields to be filled in. If a field is not filled out, I would like to display a red background of the field and an message.

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

I am not sure this is the right way!

http://jquerybyexample.blogspot.com/2012/12/jquery-to-check-all-textboxes-empty.html — zod, Jul 26 '13 at 21:13

Ross Brasseaux · Answer 1 · 2013-07-26T21:19:13.707

0

You have to bind your element to the DOM. You can use the $(document).ready(), or use jQuery's anonymous function like this:

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

edited Jul 26 '13 at 21:19

answered Jul 26 '13 at 21:12

Ross Brasseaux

3,879
1
28
48

David · Answer 2 · 2013-07-26T22:38:55.610

0

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

edited Jul 26 '13 at 22:38

answered Jul 26 '13 at 21:14

David

1,829
20
31

doen't work i can't understand why – Armida Jul 26 '13 at 22:10
can you write your code in http://jsfiddle.net/ and share link to help us understand what's going on? – David Jul 26 '13 at 22:18
http://jsfiddle.net/eZuBU/ – Armida Jul 26 '13 at 22:25
try this http://jsfiddle.net/tYhpw/ – David Jul 26 '13 at 22:36

score 0 · Answer 3 · answered Jul 26 '13 at 21:53

I used this Jquery function with a button to check if all fields had been filled in:

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

}

Maybe this helps?

Alert if input is empty

3 Answers3