Как сделать валидацию, которая отображает ошибки внтури input (placeholder)?

Question

[Tigronix]

Юзал parsley.js и не нашёл там такой возможности.
Прогуглил, полазил и всё равно не нашёл решения.
Кто-то уже сталкивался с таким?

Comments

[Tigronix]

Александр +: Спасибо, вставил просто ссылку на скриншот

Answer 1

[Сергей Горностаев]

Цвет плейсхолдера - это какое-то неведомое мне шаманство, а в остальном просто:

$('form').submit(function(e) {
  $(this).find('.required input, .required textarea').each(function() {
  	if(!$(this).val()) {
    	$(this).parent().addClass('has-error');
      $(this).attr('placeholder', 'Поле обязательно для заполнения');
    }
    else {
    	$(this).parent().removeClass('has-error');
      $(this).attr('placeholder', '');
    }
  });
  if($(this).find('.has-error').length)
  	e.preventDefault();
  else
  	alert('Submit!');
});

https://jsfiddle.net/TheDeadOne/0v778ges/2/

Comments

[Ankhena]

К этому еще дописать
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}

чтобы надпись исчезала при клике и не смущала пользователей и вообще шикарно будет

[Tigronix]

Спасибо