The teacher came up with the task. Registration form. There you can enter the name, gender, date of birth and button. In the task it is said to display an error if the male gender is chosen and the age is less than 21 years old, and if the female gender is chosen, then if it is less than 18 years old, to display an error.
I wrote my code, but it is not finalized, who can help fix it, I will be very happy. Thank you in advance!
var form = document.getElementById('form'); //получаю форму по айди form.addEventListener('submit',function(e){ // ставлю на форму слушатель событий ра екшен submit(когба будет нажата кнопка с типом submit в форме), вторым аргументом идёт функция что сработает если произойдёт событие, в ней переменая e(название может быть любое), в которой всякие штуки для обраюотки события valid(form);//вызываю ту фукнции и передаю в неё форму e.preventDefault();//отменяю стандартное поведение события submit(обновление страници) }) function valid (form) { var name = form.name.value; // тут я обьявил переменную имя и как я понял привязал её к кнопке var fail; // просто переменная в которую заносится ошибка if (name == "" || name==" ") fail = alert('Вы не ввели свое имя'); else if (document.getElementById('men').checked) { alert('Вы мужчина!'); } // // else if (document.getElementById('women').checked) { alert('Вы женщина!'); } // // }
form { border: 1px solid red; display: block; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Form registration on JavaScript</title> <link rel="stylesheet" href="style.css"> </head> <body> <form action="" method="post" name="form" id="form"> <label for="name">Имя:</label> <input type="text" placeholder="Введите своё имя" id="name" name="name"> <br><br> <span>Выберите пол:</span> <input type="radio" id="men" name="status" value="men"> <label for="men">Мужской</label> <input type="radio" id="women" name="status" value="women"> <label for="women">Женский</label> <br><br> <label for="birthday">Введите ваш год рождения:</label> <br> <input type="text" placeholder="День" id="bDay" name="birthday" size="2"> <br> <br> <input type="text" placeholder="Месяц" id="bMon" name="birthday" size="2"> <br> <br> <input type="text" placeholder="Год" id="bYear" name="birthday" size="4"> <br><br> <input type="submit" value="Проверить" name="submit" /> </form> <script type="text/javascript" src="script.js"></script> </body> </html>