Как реализовать такую форму?

Question

[Антон]

Суть в том что пишешь значение в данном случаи email и нажимаешь на плюсик после чего добавляется внизу email который мы ввели, как это реализовать на js, можно сделать через php но это во первых только 1 раз ввод + перезагрузка страницы, спасибо заранее

Comments

[gleendo]

const item = document.createElement("div");

document.appendChild(item);

[Антон]

iamevg_, спасибо

Answer 1

[Stalker_RED]

<input type="text" id="email">
<input type="button" value="+" id="btn">
<ul id="list"></ul>

btn.addEventListener('click', function() {
  list.insertAdjacentHTML('beforeend', `<li>${email.value}</li>`)
})

https://jsfiddle.net/fxL6pzv5/

Comments

[Антон]

Спасибо, немного доработал , но не понимаю как сделать проверку на правильность введенного email, я сделал но у меня получается так что поле проверяет а мен надо что бы при нажатии на кнопку проверялось, не подскажите как реализовать?

[Stalker_RED]

Антон, не понял, покажите код.

[Антон]

Stalker_RED, https://jsfiddle.net/5rmp464u/

при нажатии на "+" ничего не происходит потому что проверка на email работает в поле, а мне надо что бы проверка при нажатии происходила

[Stalker_RED]

Антон, немножко подправил https://jsfiddle.net/5rmp464u/1/

[Антон]

Stalker_RED, Теперь то что нужно! спасибо :)

Answer 2

[s-jet]

https://jsfiddle.net/pw2wbbw2/1/