Ошибка в логике?

Question

[Alex_87]

Здравствуйте! Помогите пожалуйста разобраться с простой задачей на понимание JS...
Для удобства передаю ссылку на js fiddle: https://jsfiddle.net/x2zgzpr3/24/
Задача заключается в том, чтобы при клике на кнопку submit, поля с пустыми значениями, выделялись рамкой. Спасибо!

Answer 1

[Егор]

В момент события у вас this это input[type=submit], потому что на нем вист onClick. Когда на thisдобавляется класс он все правильно добавляется только не на поля, а на кнопку. По-этому inp[i].classList.add('err') более правильный вариант.

Второй момент. По нажатию на кнопку форма отправляется т.к. submit отправляет форму на сервер. Есть несколько вариантов как исправить:
1. Повесить обработчик onSubmit на форму. Либо делать return false после всех манипуляций, либо вызывать event.preventDefault()
2. В данном примере можно просто после for возвращать return false

Comments

[Егор]

Alex_87: Я описал это во втором моменте.

[Alex_87]

Единственное, что хочу отметить, вариант с preventDefault() лучше!

Answer 2

[Сергей]

inp[i].classList.add('err');
не?

Comments

[Alex_87]

К сожалению, нет...

[Сергей]

в смысле нет? в вашем фидле правлю запускаю нажимаю отправить смотрю дебагер - класс добавлен
.err{
border:2px solid red;
}
Мож так будет виднее

[Alex_87]

felmist: https://jsfiddle.net/x2zgzpr3/28/
Так?

[Alex_87]

felmist: а почему рамка быстро исчезает? Что сделать, чтобы изменения сохранились?
И почему нельзя в this перед classList?

Answer 3

[Alexej Simakov]

inp[i].classList.add('err');

Comments

[Alex_87]

А почему рамка быстро исчезает? Что сделать, чтобы изменения сохранились?
И почему нельзя в this перед classList?

[Alexej Simakov]

Alex_87:
- код просто устанавливает стиль по условию, конечно это происходит мгновенно.
- при перезагрузке страницы все вернется в исходную позицию. Стиль будет загружен заново и установлены изначальные значения. Либо нужно специально сохранять (cookies, webstorage) все изменения стилей и в фунцкии страницы onload вычитывать их и проставлять.
- Про this читайте тут. This обычно это ссылка обьекта на самого себя. На что именно будет ссылаться this в данном случае мне не совсем ясно, но ясно, что правильно ссылаться на элемент класс которого мы хотим изменить.