Добавление нескольких элементов span в элемент div

Question

Добрый вечер, приносите извинения за то, что может показаться тривиальным вопросом.

Кажется, я не могу обернуть мозг вокруг того, чего я пытаюсь достичь. Я чувствую, что это что-то прямое, что мне не хватает.

Я пытаюсь добавить несколько интервалов в div с ошибкой, так что, когда вход сделан и поле потеряло фокус, я могу удалить диапазон, который показал ошибку для начала.

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

Существует скрипку для него here

Я попытался с помощью для цикла, но не совсем уверен, что мне нужно поставить там.

У меня был Google и посмотрите здесь, и из того, что я вижу, ему нужен цикл for, но, как я уже сказал, не совсем уверен, как его написать.

Когда я посмотрел на Firebug и зарегистрировал значение reqd, он появился в качестве последнего используемого reqd.

Я попробовал sp + = reqd, и, очевидно, это дало мне значение всех reqd вместе, как я и ожидал.

Я просто в тупике, где я ошибаюсь.

Любые указатели были бы весьма благодарны.

Спасибо.

Answer 1

Я считаю, я понимаю ...

Просто переместите $('#error').append('<span class="' + reqd + '">' + msg + '<span>'); в логику ошибки поля. Таким образом, каждое поле с ошибкой добавит новый диапазон.

Тогда вы можете по-прежнему $('#error').slideDown(); внизу.

Answer 2

Вам нужно добавить в них каждый. Также я рекомендую сделать объект, были ключевыми будут имя (от ввода), а значение будет именем человека. Это сократит ваш код.

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