Adding multiple span elements to a div

Adding multiple span elements to a div

Good afternoon, 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.

  1. $('.required').val('');
  2. $('#insert').on('click', function()
  3. {
  4. var valid = true;
  5. msg = '';
  6. sp = '';

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

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

  17. if (reqd == 'username')
  18. {
  19. reqdfn = 'ID'
  20. }
  21. else if (reqd == 'lastname')
  22. {
  23. reqdfn = 'Last Name'
  24. }
  25. else if (reqd == 'firstname')
  26. {
  27. reqdfn = 'First Name'
  28. }
  29. else if (reqd == 'country')
  30. {
  31. reqdfn = 'Country'
  32. }

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

  39. if (!valid)
  40. {
  41. //$('#error').html('');
  42. $('#error').slideDown();
  43. $('#error').append('<span class="' + reqd + '">' + msg + '<span>');
  44. }
  45. else
  46. {
  47. alert('Submitted');
  48. }
  49. });


There is a fiddle for it here

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.

As an aside, I tried putting the error append in the !valid check

 
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.

The updated fiddle can be found here