Проверка формы JavaScript.Форма отправлено событие, если поля обязательны для заполнения - PullRequest
Новая
       12

Проверка формы JavaScript.Форма отправлено событие, если поля обязательны для заполнения

0 голосов
/ 11 июня 2019

Я получил эту форму, сделанную кем-то другим. Это действительно простая форма. Проблема в том, что клиент получает пустые сообщения. Форма уже имеет некоторую проверку, поэтому мне интересно, как ее можно отправить. 

function check_message() {
  var check = true;
  if (document.getElementById('email').value == '') {
    check = false;
    document.getElementById('email').style.border = '3px solid red';
  } else {
    document.getElementById('email').style.border = '1px solid #cccccc';
  }
  if (document.getElementById('telephone').value == '') {
    check = false;
    document.getElementById('telephone').style.border = '3px solid red';
  } else {
    document.getElementById('telephone').style.border = '1px solid #cccccc';
  }
  if (check) {
    document.getElementById('thaForm').submit();
  }
}
<form id="thatForm" name="" action="soumission_process.php" method="post" class="wpcf7-form" novalidate>
  <input type="text" id="email" name="email" value="" size="40" value="">
  <input type="text" id="telephone" name="telephone" value="" size="40" value="">
  <input type="button" value="send" onClick="check_message();">
</form>

В soumission_process.php это просто: 

$email= $_POST['email'];
$telephone = $_POST['telephone'];

Тогда пошлите материал по почте ...

Как кто-то может отправить форму, пропустив проверку? Хотя, возможно, форма просто заполнена пустым пространством, чем отправлено, но есть требуемый SELECT, и он тоже пустой. Если я попробую себя, я не смогу отправить заявку, не заполнив все поля и не выбрав опцию в этом списке.

Помогите мне с этим странным Wordpress, сохраненным как HTML-сайт: D

Ответы [ 2 ]

1 голос
/ 11 июня 2019

Решение 1 Добавьте обязательное поле в каждое поле - это не помешает ботам собирать и отправлять почтовые запросы к действию

Решение 2

Удалите действие и добавьте его, если все в порядке

В обоих случаях проверьте на сервере 

window.addEventListener("load", function() {
  document.getElementById("thatForm").addEventListener("submit", function(e) {
    var allOk = 0;
    var emailField = document.getElementById('email');
    var ok = emailField.value.trim() !== '' ? 1 : 0; allOk += ok;
    emailField.classList.toggle("error", !ok)
    var telephoneField = document.getElementById('telephone')
    ok = telephoneField.value.trim() !== '' ? 1 : 0; allOk += ok;
    telephoneField.classList.toggle("error", !ok)
    if (allOk !== 2) {
      e.preventDefault();
    }
    this.action = "soumission_process.php"
  });
});
.error {
  border: 3px solid red
}
<form id="thatForm" method="post" class="wpcf7-form" novalidate>
  <input type="text" id="email" name="email" value="" size="40" value="">
  <input type="text" id="telephone" name="telephone" value="" size="40" value="">
  <input type="submit" value="send">
</form>
1 голос
/ 11 июня 2019

Проверьте данные формы в скрипте php, например: 

if(filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) && (isset($_POST['telephone']) && $_POST['telephone'] != '')){
  $email= $_POST['email'];
  $telephone = $_POST['telephone'];
  // mail datas
}else{
  // do nothing or display error
}
...