Валидация форы обратной связи, вопрос про удаление класса в js, как сделать?

Question

[Антон Вебсайтовский]

Здравствуйте, нужна небольшая помощь с валидацией.

Если поля со звездочками не заполнили, то срабатывает валидация при клике на кнопку, выскакивает красная рамка и написано заполните поля, а если все верно заполнил то выскакивает другой стиль рамки, зелена, сообщение отправлено.

Бывает так, что сделал ошибку не ввел, вылезла красная рамка, а потом все верно заполнил и нажал отправить и вылезла зеленая рамка, то есть две рамки, не очень красиво.



Как мне в js сделать так, чтобы красная рамка убиралась если она есть, я попробовал сделать так.

else if	(data){
$('#resultgreen').addClass('resultgreen').removeClass('resultred').html('Сообщение отправленно.');
$('[name="namee"]').val('');
$('[name="email"]').val('');
$('[name="question"]').val('');
$('[name="captcha"]').val('');	
}

Добавил: .removeClass('resultred')
Но так не работает.

Для вывода валидации у меня два кода, один для сообщения что отправлено, зеленая рамка, а другая красная рамка об ошибках пишет.




Полный код валидации:

<script>
jQuery(document).ready(function(){
jQuery("#submit").click(function(){
namee	= $('[name="namee"]').val();
email	= $('[name="email"]').val();
question	= $('[name="question"]').val();
captcha = $('[name="captcha"]').val();

submitData = $('#contactsForm').serialize();
if(namee !== '' && email !== '' && question !== '' && captcha !== '')
{
$.ajax({ 
type: "POST",
url: 'http://'+location.host+'/ajax/send',
data: submitData,
dataType: 'json',
success: function(data)
{
if(data == 'error_captcha') 
{
$('#resultred').addClass('resultred').html('Неправильно ввели код с картинки, повторите ввод кода с картинки');
																			
} 
else if	(data){
$('#resultgreen').addClass('resultgreen').removeClass('resultred').html('Сообщение отправленно.');
$('[name="namee"]').val('');
$('[name="email"]').val('');
$('[name="question"]').val('');
$('[name="captcha"]').val('');	
}
else 
{
$('#resultred').addClass('resultred').html('Сообщение не отправленно попробуйте отправить повторно.');
$('[name="namee"]').val('');
$('[name="email"]').val('');
$('[name="question"]').val('');	
$('[name="captcha"]').val('');
}
}
});
return false;
}
else
{
$('#resultred').addClass('resultred').html('Заполните важные поля со звездочками *');
return false;
}	
return false;
});
});
</script>

Подскажите пожалуйста как лучше сделать или чтобы класс прятался или удалялся если он есть. и как это сделать.

Answer 1

[Stalker_RED]

Если
#resultgreen и #resultred - два разных элемента, то вместо строки

$('#resultgreen').addClass('resultgreen').removeClass('resultred').html('Сообщение отправленно.');

сделайте

$('#resultgreen').addClass('resultgreen').html('Сообщение отправленно.');
$('#resultred').removeClass('resultred').html('');

И вообще, можно эти блоки просто скрывать/показывать при помощи show()/hide()
Или использовать один блок #result которому устанавливать классы red/green или даже error/success.

Comments

[Антон Вебсайтовский]

а как скрывать и показывать? при помощи show()/hide().
один блок для вывода, но стили red и green я правильно понял? как это сделать ?

[Stalker_RED]

сделать блок #result и манипулировать им типа

$('#result').addClass('error').html('Неправильный код.').show();

$('#result').addClass('success').removeClass('error').html('Всё норм!').show();

$('#result').hide();