Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   PopUp. Модальное окно. Форма (https://javascript.ru/forum/events/73421-popup-modalnoe-okno-forma.html)

NastyaNewer 14.04.2018 18:20

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 14.04.2018 18:34

Необходимо сделать проверку полей формы при отправке на валидацию, если поля пустые то подсветка поля

Dilettante_Pro 14.04.2018 19:29

NastyaNewer,
У вас в форме нет полей - форма пустая. Что проверять?

NastyaNewer 14.04.2018 21:29

<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>

laimas 14.04.2018 21:50

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

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

</form>

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

Должно быть

<form name="contact_form" action="#" method="post" class="form_main">
... далее ее поля

NastyaNewer 14.04.2018 22:01

Спасибо. Как отработчик события настроить в JS?

laimas 14.04.2018 22:04

Может это сначала, а для древних браузеров 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

NastyaNewer 14.04.2018 22:27

Спасибо. Мне необходимо сделать это все чисто в отдельном файле JS. Чтобы HTML, CSS были чистыми. Использовать DOM и События

laimas 14.04.2018 22:37

Цитата:

Сообщение от NastyaNewer
Чтобы HTML, CSS были чистыми.

Уже не получится, форма то уже "замарала" HTML. )

Форма всегда есть на странице или добавляется на не динамически?

NastyaNewer 14.04.2018 22:42

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

laimas 14.04.2018 22:53

Цитата:

Сообщение от NastyaNewer
У меня она работала первоначально

Если у вас форма всегда присутствует на странице, то вы либо должны подключать свой js-код с конце страницы, либо устанавливать обработчик document.getElementById('form_main').... в обработчике события готовности DOM.

Если форма добавляется на страницу динамически, то либо делегировать обработку события onsubmit ближайшему родителю формы, который есть на странице всегда, либо устанавливать обработчик onsubmit после добавления формы на страницу.

NastyaNewer 15.04.2018 00:32

JS конечно подключена, в конце перед body, все как положено

NastyaNewer 15.04.2018 00:33

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;
}
Еще мой очередной код обработки события клика на кнопку отправить , никак пустые поля не подсвечиваются. Помогите !!!!

рони 15.04.2018 01:31

NastyaNewer,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони 15.04.2018 01:31

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>

NastyaNewer 15.04.2018 02:28

Спасибо большое , не работает никак даже ваше.

NastyaNewer 15.04.2018 02:30

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();
    }
  }
}

NastyaNewer 15.04.2018 02:31

рони,
спасибо вам большое, все время жду от вас ответа, всегда даете дельные советы

NastyaNewer 15.04.2018 02:44

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=''
    }
  }
})
}

Не работает валидация полей при отправке пустого поля никак. все варианты уже перепробовала

рони 15.04.2018 03:26

Цитата:

Сообщение от NastyaNewer
не работает никак даже ваше.

здесь работает пост№15?

laimas 15.04.2018 04:05

NastyaNewer,
а где же в обоих случаях результат проверки для действия по умолчанию, которое и будет определять дальнейшее на странице?

NastyaNewer 15.04.2018 13:49

да здесь 15 пост работает, у меня нет, не могу понять почему

laimas 15.04.2018 14:10

Проверять лучше так как в посте https://javascript.ru/forum/483303-post19.html, только обрабатывать onsubmit, а не нажатие кнопки submit, обходом в цикле полей формы this.elements.

Проверять заполнение поля как element[count].value == '', это не верно, так как один пробел уже не равен пустой строке, но и не является корректным значением. Нужно проверять значение поля после удаления крайних пробелов в нем.

NastyaNewer 15.04.2018 16:57

спасибо поняла свои ошибки, все работает


Часовой пояс GMT +3, время: 11:53.