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, время: 16:30. |