CODEWITHSUNDEEP
jqueryhtmlvalidationformsfield
Robert Pessagno
Robert Pessagno

Reputation: 529

jQuery - Show error on blank form fields on submit

I have an HTML form that puts an asterisk on each label when the user tries to submit it with fields left blank. However, it only puts an asterisk on the first label that is left blank, not all of them. Here's my HTML:

<label for="name"><span class="asterisk">* </span>Name</label>
<input type="text" id="name" name="name" class="required" />

<label for="email"><span class="asterisk">* </span>Email</label>
<input type="text" id="email" name="email" class="required" />

<label for="company"><span class="asterisk">* </span>Company</label>
<input type="text" id="company" name="company" class="required" />

<label for="address"><span class="asterisk">* </span>Address</label>
<input type="text" id="address" name="address" class="required" />

<label for="favColor"><span class="asterisk">* </span>Favorite Color</label>
<input type="text" id="favColor" name="favColor" value="N/A" />

And here's my jQuery:

$(function() {
    $('.submit').click(function() {
    if ($('#name').val().length == 0) {
        $('label[for="name"] .asterisk').show();
        return false;
        }
    if ($('#email').val().length == 0) {
        $('label[for="email"] .asterisk').show();
        return false;
        }
    if ($('#company').val().length == 0) {
        $('label[for="company"] .asterisk').show();
            return false;
        }
    if ($('#address').val().length == 0) {
        $('label[for="address"] .asterisk').show();
        return false;
        }
    if ($('#favColor').val().length == 0) {
        $('label[for="favColor"] .asterisk').show();
        return false;
        }
    else {
        $('.right').stop().animate({scrollTop: 0}, { duration: 1500, easing: 'easeOutQuart'});
        }
    });
});

Please pardon the n00bish jQuery. If anyone can come up with a simple solution on how to make the asterisk in the span tags appear on all of the fields left blank on submit, that would be awesome!

Upvotes: 0

Views: 4005

Answers (5)

Nick Craver
Nick Craver

Reputation: 630429

I would give #favColor the required class since it is required, then do this:

$(function() {
    $('.submit').click(function() {
      $("label .asterisk").hide();
        var empty = $(".required").filter(function() { return !this.value; })
                                  .prev().find(".asterisk").show();
      if(empty.length) return false;   //uh oh, one was empty!
      $('.right').stop().animate({scrollTop: 0}, { duration: 1500, easing: 'easeOutQuart'});
    });
});

You can test it out here.

Upvotes: 2

user113716
user113716

Reputation: 322502

Since each required input has a required class, just select using that, and iterate over each one.

Try it out: http://jsfiddle.net/qeALK/

$('.submit').click(function() {
    var ret = true;
    $('.required').each(function() {
        if( !this.value ) {
            $(this).prev().children('.asterisk').show();
            ret = false;
        }
    });
    $('.right').stop().animate({scrollTop: 0}, { duration: 1500, easing: 'easeOutQuart'});
    return ret;
});

Upvotes: 2

Marcus Whybrow
Marcus Whybrow

Reputation: 19998

This could be better written like this:

$(function() {
    $('.submit').click(function() {
        var ret = true;
        $('input.required').each(function() {
            if ($(this).val().length == 0) {
                ret = false;
                $(this).prev().find('.asterisk').show();
            }
        });
        return ret;
    };
});

Upvotes: 1

puckipedia
puckipedia

Reputation: 891

Can you try this?

$(function() {
$('.submit').click(function() {
var correct = true;
if ($('#name').val().length == 0) {
    $('label[for="name"] .asterisk').show();
    correct = false;
    }
if ($('#email').val().length == 0) {
    $('label[for="email"] .asterisk').show();
    correct = false;
    }
if ($('#company').val().length == 0) {
    $('label[for="company"] .asterisk').show();
    correct = false;
    }
if ($('#address').val().length == 0) {
    $('label[for="address"] .asterisk').show();
    correct = false;
    }
if ($('#favColor').val().length == 0) {
    $('label[for="favColor"] .asterisk').show();
    correct = false;
    }
if(correct == true) {
    $('.right').stop().animate({scrollTop: 0}, { duration: 1500, easing: 'easeOutQuart'});
    }else{
          return false;
    }
});
});

Actually the same code but with an correct variable.

Upvotes: 1

Josiah Ruddell
Josiah Ruddell

Reputation: 29831

add a single return or better yet use the validate plugin

$(function() {
    $('.submit').click(function() {
    var ret = true;
    if ($('#name').val().length == 0) {
        $('label[for="name"] .asterisk').show();
        ret = false;
        }
    if ($('#email').val().length == 0) {
        $('label[for="email"] .asterisk').show();
        ret = false;
        }
    if ($('#company').val().length == 0) {
        $('label[for="company"] .asterisk').show();
        ret = false;
        }
    if ($('#address').val().length == 0) {
        $('label[for="address"] .asterisk').show();
        ret = false;
        }
    if ($('#favColor').val().length == 0) {
        $('label[for="favColor"] .asterisk').show();
        ret = false;
        }
    else {
        $('.right').stop().animate({scrollTop: 0}, { duration: 1500, easing: 'easeOutQuart'});
        }
    return ret;
    });
});

Upvotes: 1

Related Questions