Почему setAttribute() выдает ошибку Uncaught TypeError: name.setAttribute is not a function?

Question

[Senseich]

Хочу в элемент добавить атрибут

oninvalid="this.setCustomValidity('Введите своё имя')"

<script>
var name = document.getElementById("MyName");
name.setAttribute("oninvalid", "this.setCustomValidity('Введите своё имя')");	
</script>

В консоле выдаёт ошибку Uncaught TypeError: name.setAttribute is not a function?
Что не так делаю?

Answer 1

[Stalker_RED]

document.querySelector('#MyName').addEventListener('invalid', function(){
  this.setCustomValidity('Введите своё имя')
})

Comments

[Senseich]

Вопросик, а почему "invalid" , у меня же атрибут oninvalid?

Там в целом в общем в поле должно быть два атрибута:

oninvalid="this.setCustomValidity('Номер должен содержать от 6-11 цифр')" oninput="setCustomValidity('')"

[Stalker_RED]

Senseich, потому что событие называется именно invalid

Это вообще с любыми событиями так. Атрибут onclick а событие click. Атрибут oninput а событие - input.

Атрибут "припожаре" а само событие - "пожар". (юмор).

[Senseich]

Stalker_RED, Не пашет prntscr.com/gyzo77

[Stalker_RED]

Senseich, у вас вообще есть на странице элемент с таким id?

[Stalker_RED]

Senseich, вы подключаете в head, когда элемент еще не существует.

[Senseich]

prntscr.com/gyzr5j

[Senseich]

Stalker_RED, У меня же таким способом находило
var name = document.getElementById("MyName");

[Stalker_RED]

var name = document.getElementById("MyName");
console.log('опа!', name) // спорим, что выведет "опа! null"
// если вы это в head подключаете

[Senseich]

Stalker_RED, Вы как мою верстку у себя проверили? ))

У меня выдаёт null
prntscr.com/gyzwev

[Stalker_RED]

Senseich, никак не проверял. посмотрел на скриншот, увидел что вы обращаетесь к DOM из head. В это время body еще не прогрузился.

[Senseich]

Stalker_RED, *) Ну да, если в хэд то нужно windows.onload, да?

Вставил снизу, заработало, но нужно еще задать второй атрибут oninput="setCustomValidity('')"
Потому что без него сообщение выходит даже если вводишь в окошко инфу, я уже проверил
Как это будет выглядеть для oninput? Какое событие в этом случае прописывать?

[Senseich]

Stalker_RED, посмотри пожалуйста, так правильно? Впринципе работает, может как то упростить всё это можно?

document.querySelector('#MyName').oninput = function(){
	this.setCustomValidity('')
	}

[Stalker_RED]

Senseich, да, так будет работать, но это тупо.

var x = document.querySelector('#MyName')

x.addEventListener('invalid', function() {
  this.setCustomValidity('Введите своё имя')
})

x.addEventListener('input', function() {
  this.setCustomValidity('')
})

список всех событий

[Senseich]

Stalker_RED, Спасибо. надо основы учить )

Еще смотри, если мне нужно для второго id другое всплывающее поле, тоже самое переписывать для второго или можно как то объединить?
Допустим это будет общее у всех полей

addEventListener('input', function() {
  this.setCustomValidity('')
})

Как грамотно написать ?

[Stalker_RED]

Senseich, Как-то так

let fields = document.querySelectorAll('#registration-form input')
for (let i = 0; i < fields.length; i++) {
  fields[i].addEventListener('input', resetValidity)
}

function resetValidity(){
  this.setCustomValidity('')
}

[Senseich]

Stalker_RED, Ок, благодарю.
Раз уж такая пьянка ) Подскажи, я пытаюсь твоим способом на кнопку повесить событие при отправке, чтобы выскакивало сообщение, но что-то ничего не появляется:

document.querySelector('#butsub').addEventListener('submit', function() {
    setTimeout("alert('Ваша заявка отправлена')", 100);
})

[Stalker_RED]

Senseich, если #butsub это кнопка, то у меня для вас новость: у кнопки нет события "submit", надо вешать на форму, а не на кнопку.