Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.04.2018, 18:20
Интересующийся
Отправить личное сообщение для NastyaNewer Посмотреть профиль Найти все сообщения от NastyaNewer
 
Регистрация: 06.04.2018
Сообщений: 28

PopUp. Модальное окно. Форма
Добрый вечер, помогите разобраться с ошибкой. Плиз. Дана форма
<div id="popup_contact" class="feedback popup_block">
<div class="form">
<form name="contact_form" action="#" method="post" id="form_main"></form> <!--onsubmit="return validateForm();"-->
</div>
</div>

решила перенести событие onsubmit из HTML разметки в JS файл. Слетело.
document.getElementById('form_main').addEventListe ner('submit', function validateForm() {
valid = true;
if ( document.contact_form.username.value == '' ) {
document.contact_form.username.style.border = '2px solid red';
valid = false;
}
if ( document.contact_form.email.value == '' ) {
document.contact_form.email.style.border = '2px solid red';
valid = false;
}
return valid;
});
Ответить с цитированием
  #2 (permalink)  
Старый 14.04.2018, 18:34
Интересующийся
Отправить личное сообщение для NastyaNewer Посмотреть профиль Найти все сообщения от NastyaNewer
 
Регистрация: 06.04.2018
Сообщений: 28

Необходимо сделать проверку полей формы при отправке на валидацию, если поля пустые то подсветка поля
Ответить с цитированием
  #3 (permalink)  
Старый 14.04.2018, 19:29
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

NastyaNewer,
У вас в форме нет полей - форма пустая. Что проверять?
Ответить с цитированием
  #4 (permalink)  
Старый 14.04.2018, 21:29
Интересующийся
Отправить личное сообщение для NastyaNewer Посмотреть профиль Найти все сообщения от NastyaNewer
 
Регистрация: 06.04.2018
Сообщений: 28

<div id="popup_contact" class="feedback popup_block">
<div class="form">
<form name="contact_form" action="#" method="post" class="form_main"></form> <!--onsubmit="return validateForm();"-->
<label><input type="text" id="username" name="username" class="username field_name field"></label>
<label><input type="text" id="useremail" name="email" class="email_text field_email field" ></label>
<label><textarea class="space_message field_message field" name="message_people" id="message" rows="10"></textarea></label></p>
<label for="submit"></label>
<label><input type="submit" id="submit" value="Отправить" class="button_message"></label>
<label for="popup_contact" class="close_block"></label>

</div>
</div>

Последний раз редактировалось NastyaNewer, 14.04.2018 в 22:00.
Ответить с цитированием
  #5 (permalink)  
Старый 14.04.2018, 21:50
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

<form name="contact_form" action="#" method="post" class="form_main"></form>

и далее по коду

</form>

Это ошибка, поля формы находятся вне ее, а закрывающий тег формы не понять что закрывает.

Должно быть

<form name="contact_form" action="#" method="post" class="form_main">
... далее ее поля
Ответить с цитированием
  #6 (permalink)  
Старый 14.04.2018, 22:01
Интересующийся
Отправить личное сообщение для NastyaNewer Посмотреть профиль Найти все сообщения от NastyaNewer
 
Регистрация: 06.04.2018
Сообщений: 28

Спасибо. Как отработчик события настроить в JS?
Ответить с цитированием
  #7 (permalink)  
Старый 14.04.2018, 22:04
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Может это сначала, а для древних браузеров JS?

http://htmlbook.ru/html/input/required
http://htmlbook.ru/html/input/placeholder
http://htmlbook.ru/html/input/pattern

http://htmlbook.ru/css/required
http://htmlbook.ru/css/invalid
http://htmlbook.ru/css/valid
Ответить с цитированием
  #8 (permalink)  
Старый 14.04.2018, 22:27
Интересующийся
Отправить личное сообщение для NastyaNewer Посмотреть профиль Найти все сообщения от NastyaNewer
 
Регистрация: 06.04.2018
Сообщений: 28

Спасибо. Мне необходимо сделать это все чисто в отдельном файле JS. Чтобы HTML, CSS были чистыми. Использовать DOM и События
Ответить с цитированием
  #9 (permalink)  
Старый 14.04.2018, 22:37
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от NastyaNewer
Чтобы HTML, CSS были чистыми.
Уже не получится, форма то уже "замарала" HTML. )

Форма всегда есть на странице или добавляется на не динамически?
Ответить с цитированием
  #10 (permalink)  
Старый 14.04.2018, 22:42
Интересующийся
Отправить личное сообщение для NastyaNewer Посмотреть профиль Найти все сообщения от NastyaNewer
 
Регистрация: 06.04.2018
Сообщений: 28

У меня она работала первоначально, мне поставили задачу использовать DOM и события, вызова функций из HTML убрать)))
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Модальное окно. Salvat Элементы интерфейса 4 25.02.2016 09:33
Модальное окно, форма, JQuery, перехватить SUBMIT gakhome Элементы интерфейса 11 15.12.2015 17:44
форма и модальное окно ask67 jQuery 13 08.09.2014 16:15
Bootstrap модальное окно igor.3dviz Общие вопросы Javascript 1 09.02.2014 13:27
Как передать переменную в модальное окно sinsir jQuery 24 20.06.2013 16:59