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; }); |
Необходимо сделать проверку полей формы при отправке на валидацию, если поля пустые то подсветка поля
|
NastyaNewer,
У вас в форме нет полей - форма пустая. Что проверять? |
<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> |
<form name="contact_form" action="#" method="post" class="form_main"></form>
и далее по коду </form> Это ошибка, поля формы находятся вне ее, а закрывающий тег формы не понять что закрывает. Должно быть <form name="contact_form" action="#" method="post" class="form_main"> ... далее ее поля |
Спасибо. Как отработчик события настроить в JS?
|
Может это сначала, а для древних браузеров 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 |
Спасибо. Мне необходимо сделать это все чисто в отдельном файле JS. Чтобы HTML, CSS были чистыми. Использовать DOM и События
|
Цитата:
Форма всегда есть на странице или добавляется на не динамически? |
У меня она работала первоначально, мне поставили задачу использовать DOM и события, вызова функций из HTML убрать:))))
|
Цитата:
Если форма добавляется на страницу динамически, то либо делегировать обработку события onsubmit ближайшему родителю формы, который есть на странице всегда, либо устанавливать обработчик onsubmit после добавления формы на страницу. |
JS конечно подключена, в конце перед body, все как положено
|
button = document.getElementById('feedback');
button.addEventListener('submit', validForm, false); function validForm(){ 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; } Еще мой очередной код обработки события клика на кнопку отправить , никак пустые поля не подсвечиваются. Помогите !!!! |
NastyaNewer,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
NastyaNewer,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> </head> <body> <div id="popup_contact" class="feedback popup_block"> <div class="form"> <form name="contact_form" action="#" method="post" class="form_main"> <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> <label for="submit"></label> <label><input type="submit" id="submit" value="Отправить" class="button_message"></label> <label for="popup_contact" class="close_block"></label> </form> </div> </div> <script> var form = document.contact_form; form.addEventListener("submit", validForm, false); function validForm(event) { var valid = true, border = ""; if (form.username.value == "") { border = "2px solid red"; valid = false; } form.username.style.border = border; border = ""; if (form.email.value == "") { border = "2px solid red"; valid = false; } form.email.style.border = border; if (!valid) { event.preventDefault(); } } </script> </body> </html> |
Спасибо большое , не работает никак даже ваше.
|
function validateForm() { var form = document.contact_form; // по имени var elements = form.querySelectorAll('.form_control'); form.addEventListener('submit', validForm, false); function validForm(event) { var valid = true, border = ''; if (form.username.value == '') { border = '2px solid red'; valid = false; } form.username.style.border = border; border = ''; if (form.email.value == '') { border = '2px solid red'; valid = false; } form.email.style.border = border; if (!valid) { event.preventDefault(); } } } |
рони,
спасибо вам большое, все время жду от вас ответа, всегда даете дельные советы |
function validForm() { var element = document.getElementsByClassName('form_control'); var button = document.getElementById('submit') button.addEventListener('click', function(){ for (var count = 0; count <= element.length; count++) { if (element[count].value == ''){ element[count].style.border='2px solid red' } else{ element[count].style.border='' } } }) } Не работает валидация полей при отправке пустого поля никак. все варианты уже перепробовала |
Цитата:
|
NastyaNewer,
а где же в обоих случаях результат проверки для действия по умолчанию, которое и будет определять дальнейшее на странице? |
да здесь 15 пост работает, у меня нет, не могу понять почему
|
Проверять лучше так как в посте https://javascript.ru/forum/483303-post19.html, только обрабатывать onsubmit, а не нажатие кнопки submit, обходом в цикле полей формы this.elements.
Проверять заполнение поля как element[count].value == '', это не верно, так как один пробел уже не равен пустой строке, но и не является корректным значением. Нужно проверять значение поля после удаления крайних пробелов в нем. |
спасибо поняла свои ошибки, все работает
|
Часовой пояс GMT +3, время: 11:53. |