Как обратится к placeholder в if?

Question

[Айнур Ярулин]

Здравствуйте, только изучаю HTML CSS и JavaScript и хочу обучится делать форму авторизации для сайта, мне нужно, чтобы кнопка "Регистрация" была "disabled" пока другие поля ввода не будут заполнены, но я не знаю как обратится к placeholder в JavaScript, пробовал так, но вроде не работает

<input placeholder="Email" id="email" type="email">

if(placeholder = false){
  // потом придумаю как дальше
}

Если есть какие-то другие варианты, то пожалуйста подскажите.

Comments

[Ярослав Иванов]

Што?

[Андрей Шевкалюк]

Для начала выучите, как работает <input> и что такое placeholder

[Ankhena]

В CSS есть псевдокласс :placeholder-shown, но вам это не очень поможет. Вряд ли вам достаточно такой проверки.

Устанавливаете кнопке disabled на js (не в разметке).
Получаете значение из инпута, проверяете корректно ли оно. И так в цикле.
Если всё ок, то снимаете disabled.

Гуглится по "валидация форм на js".
И не забудьте, что валидацию нужно повторять на сервере.

[Spartak (Web-StyleStudio)]

squadbrodyaga,

if(placeholder = false){
  // потом придумаю как дальше
}

Кстати, здесь тоже ошибочка закралась. Вы присваиваете значение false, для сравнения надо использовать == false, но лучше == ""

Answer 1

[LJ322]

Вам ранее ответили, что нужно обращаться не к placeholder, а к атрибуту value. Так как вся информация, которая вводится в поле в браузере, записывается в свойство value (в placeholder находится подсказка, а не введённые данные):

let input = document.getElementById('input'); // Находит нужный элемент в DOM дереве
  if (!input.value) {
  // Какие-то действия
  }

Для знакомства с DOM можете почитать вот этот материал:

DOM

https://learn.javascript.ru/dom-nodes

Comments

[Айнур Ярулин]

Благодарю, попробую доделать код до конца, надеюсь будет работать)

[Айнур Ярулин]

А можно как-то без атрибута value это сделать? Просто из-за него мне приходится отказываться от label.

[LJ322]

squadbrodyaga, а чем вам мешает label?

[Айнур Ярулин]

Мне не label мешает, а value, вот скрин, текст типо дублируется

[Айнур Ярулин]

LJ322, А, кажется дошло как можно сделать, но всё равно спасибо

Answer 2

[Александр Аксентьев]

пока другие поля ввода не будут заполнены

Так и почему вы проверяете отсутствие плейсхолдера, если надо проверять заполнены ли поля?

Comments

[Айнур Ярулин]

Ну если в поле что-то есть, то placeholder же убирается, а как тогда проверить поле на заполнение?

[v3shin]

squadbrodyaga, placeholder никуда не девается. Проверяйте сразу значение value.

[Айнур Ярулин]

v3shin, ну ладно, спасибо, знать бы еще что это такое)

[Spartak (Web-StyleStudio)]

squadbrodyaga,
placeholder - это подсказка
value - то что пользователь вводит в input