Как изменить надпись в input:invalid?

Question

[Andrey Frigoris]

Нужно чтобы при отправке формы валидация не всплывала окошком, а прописывалась внутри поля да еще и нужным текстом. Картинка:

Answer 1

[Павел Корнилов]

<style>
	.err {font-size: 150%; color:red;}
</style>
<input onblur="valid(this);">
<script>
	function valid (el) {
		if(!el.value.trim().length) {
			el.value= 'Это обязательное поле';
			el.classList.add('err');
		} else el.classList.remove('err');
	}
</script>

Answer 2

[Максим Тимофеев]

Что Вы ожидаете? Не видя Вашего кода, не зная как у Вас устроена валидация, да хотя бы что Вы используете, как можно ответить? Потрудитесь дать исчерпывающую информацию, что бы был возможен ответ в принципе.
Магического метода типа:

$('votEto').esli('vot_tak',function(){
$(this).chtoToSdelay();
});

не существует. Разные ситуации - разные решения. А Вы даже html или ссылки не дали.

Answer 3

[Bogdan Sokolovskyi]

<form id="myForm">
    Имя:
    <input type="text" name="name">
    <input type="submit" value="Submit">
  </form>

  <script>
    let form = document.getElementById('myForm');
    form.addEventListener('submit', validateForm);

    function validateForm(e) {
      var x = form.elements.name.value;
      if (x == null || x == "") {
        form.elements.name.value = "Необходимо заполнить поле Имя!";
        e.preventDefault();
      }
    }
  </script>