добавить новый элемент div после ввода текста и добавить css

Question

У меня есть html-форма с текстами типов ввода и переключателем с классом = требуется. Я пытаюсь проверить форму. При отправке формы мне нужно проверить форму, и если она вернет false, мне нужно добавить новый div (текст «Заполните обязательное поле») и отобразите его под полем красного цвета. Если пользователь заполняет это поле, он должен стать зеленым или красный цвет должен исчезнуть. jQuery находится в отдельном файле js. Таким образом, при нажатии кнопки отправки я делаю следующее:

$('#test_form .required').filter(':visible').each(function() { 
var input = $(this); 
if($(this).is(':empty')){ 
    $(this).css("border","2px solid #FF0004"); 
    $(this).after('<div>Please fill in the required field</div>'); 
    return = false; 
}else{ 
    return true; 
} 
}); 

Есть пара проблем, возникающих сейчас. 1. Требуется текст под полями. Мне нужно, чтобы в красном цвете и размере шрифта - 10 пикселей. Итак, как я могу добавить css в недавно добавленный div? 2. Подумайте, есть ли радиогруппа из 5 переключателей. Поэтому мне нужен текст, необходимый только в том случае, если по крайней мере один из них не выбран и отображает текст ниже этой группы радиосвязи. Теперь требуемый текст подходит для всех переключателей. 3. Также, если пользователь нажимает кнопку отправки 4 раза, текст добавляется 4 раза для каждого поля. Я думаю, что мы можем справиться с использованием флага

Может ли кто-нибудь направить меня на это?

Answer 1

1. искомый текст подходит под fields.I нужно, что в красный цвет и размер шрифта - 10px. Итак, как я могу добавить css в недавно добавленный div?

Как насчет добавления css? Просто добавьте класс во вновь созданный div. Это может помочь вам лучше поместить ваш div и добавить другие css.

Изменить

$(this).after('<div>Please fill in the required field</div>'); 

в

$(this).after('<div class="info">Please fill in the required field</div>'); 

И CSS

<style> 
.info{ 
background:#FFB0B0; 
color:#FF0000; 
} 
</style> 

2. Рассмотрим есть радио группа 5 радиокнопки. Поэтому мне нужен текст, необходимый только в том случае, если по крайней мере один не выбран и отобразите текст ниже этой группы радиосвязи. Теперь требуемый текст подходит для всех переключателей .

3. Также, если пользователь нажимает кнопку отправки 4 раза, текст добавляется 4 раза для каждого поля.

Добавление флага может исправить эти проблемы

Answer 2

вы должны установить errorPlacement раздел jQuery validate функции.

$("#form").validate({ 
    rules: { 
     name: { 
      required: true 
     }, 
     firstname: { 
      required: true 
     } 
    }, 
    messages: { 
     name: { 
      required: "Enter name" 
     }, 
     firstname: { 
      required: "Enter firstname" 
     } 
    }, 
    errorPlacement: function ($error, $element) { 
     var name = $element.attr("name"); 

     $("#error" + name).append($error); 
    } 
}); 

Пример:http://jsfiddle.net/R3aEQ/