Adding multiple span elements to a div element

Question

Good evening, apologies for what may seem like a trivial question.

I can't seem to wrap my brain around something I am trying to accomplish. I feel it is something straightforward that I am missing.

I am trying to add multiple spans to a error div so that when an input is made and the field has lost focus, I can remove the span that showed the error to begin with.

$('.required').val('');
$('#insert').on('click', function()
{
    var valid = true;
    msg = '';
    sp = '';

    $('.required').each(function() 
    {
        var reqs = $(this);
        reqd = reqs.attr('name');

        if (!reqs.val()) 
        {
            valid = false;

            if (reqd == 'username')
            {
                reqdfn = 'ID'
            }
            else if (reqd == 'lastname')
            {
                reqdfn = 'Last Name'
            }
            else if (reqd == 'firstname')
            {
                reqdfn = 'First Name'
            }
            else if (reqd == 'country')
            {
                reqdfn = 'Country'
            }

            msg += reqdfn + ' cannot be blank. <br/>';
            reqs.css({'border': '1px solid #C33', 'background-color': '#F6CBCA'});
        }
    });

    if (!valid)
    {
        //$('#error').html('');
        $('#error').slideDown();
        $('#error').append('<span class="' + reqd + '">' + msg +  '<span>');
    }
    else
    {
        alert('Submitted');
    }
});

There is a fiddle for it here

I have tried using a for loop, but not entirely sure what I need to put in there.

I've had a Google and a look on here and from what I can see it does need a for loop, but like I say, not quite sure how to write it.

When I looked at Firebug and logged the value of reqd it was showing up as the last reqd in use.

I tried sp += reqd and obviously this gave me a value of all reqd's together as I did expect.

I am just stumped as to where I am going wrong.

Any pointers would be greatly appreciated.

Thanks.

helion3 · Accepted Answer · 2014-02-07 00:04:43Z

1

I believe I understand...

Just move the $('#error').append('<span class="' + reqd + '">' + msg + '<span>'); into the field error logic. That way each field that has an error will append a new span.

Then you can still $('#error').slideDown(); at the bottom.

answered Feb 7, 2014 at 0:04

helion3

38k16 gold badges66 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Danny Chernyavsky · Accepted Answer · 2014-02-07 00:09:43Z

0

You need to put appending into each. Also I reccomend make an object, were key will be a name (from input) and value will be human-name. It will shorten your code.

$('.required').val('');
$('#insert').on('click', function(){
    var valid = true,
        msg = '',
        sp = '';

    var names = {
        'username' : 'ID',
        'lastname' : 'Last Name',
        'firstname' : 'First Name',
        'country' : 'Country'
    };

    $('.required').each(function() {
        var reqs = $(this);
        reqd = reqs.attr('name');

        if (!reqs.val()) 
        {
            valid = false;
            reqdfn = names[reqd];

            msg += reqdfn + ' cannot be blank. <br/>';
            reqs.css({'border': '1px solid #C33', 'background-color': '#F6CBCA'});

            $('#error').append('<span class="' + reqd + '">' + msg +  '<span>');
        }
    });

    if (!valid) {
        //$('#error').html('');
        $('#error').slideDown();

    } else {
        alert('Submitted');
    }
});

answered Feb 7, 2014 at 0:09

Danny Chernyavsky

4792 silver badges6 bronze badges

1 Comment

Chris Over a year ago

Hi Dasnny, thanks for answering, when I try it this way, I am getting multiple spans in the div as follows: ID, ID + Firstname, ID + First Name + Last Name, ID + First Name + Last Name + Country. It seems to just be iterating through each one and shoving it in there as a span. Not quite sure where i'm going wrong. Oh well. Thanks anyway

Collectives™ on Stack Overflow

Adding multiple span elements to a div element

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related