Обход формы HTML при отправке - PullRequest
Новая
       6

Обход формы HTML при отправке

0 голосов
/ 23 ноября 2018

Я новичок в HTML и JS и пытаюсь настроить страницу "Контакты" с помощью GitHub Pages.Я использую formspree.io для отправки форм и электронной почты на почтовую учетную запись приложения.

Вот предложение: я пытаюсь настроить простую проверку, чтобы убедиться, чтополя формы не пусты (нет необходимости в проверке на стороне сервера), но ответ «onSubmit», кажется, игнорируется каждый раз.

Вот мой файл contact.html: 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Helvetica;}
* {box-sizing: border-box;}

input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

input[type=submit] {
    background-color: #b00faa;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px;
}

input[type=submit]:hover {
    background-color: #780774;
}

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}
</style>
</head>
<body>

<h3>Formulário de Contato</h3>

<div class="container">
  <form action="https://formspree.io/myEmailHere@mail.com" method="post" onsubmit="return validate();">
    <label for="fname">Nome Completo</label>
    <input type="text" id="fname" name="fname" placeholder="Seu nome completo...">

    <label for="email">E-mail</label>
    <input type="text" id="email" name="email" placeholder="Seu e-mail...">

    <label for="subject">Mensagem</label>
    <textarea id="subject" name="subject" placeholder="Digite algo..." style="height:200px"></textarea>

    <input type="submit" value="Enviar">
  </form>
</div>

<p id="error_catch"></p>

<script>
  function validate() {
    var at = document.getElementById("email").value.indexOf("@");
    var message = document.getElementById("subject").value;
    var fname = document.getElementById("fname").value;

    if (fname.length < 1) {
      alert("Digite seu nome...");
      return false;
    }
    if (at === -1) {
        alert("E-mail inválido!");
        return false;
    }
    if (message.length < 1) {
      alert("Digite uma mensagem");
      return false;
    }
    return true;
  }
</script>

</body>
</html>

Если я открываю файл локально в Google Chrome, он работает нормально, появляются предупреждения и форма не отправляется до тех пор, пока не будут заполнены все поля.Однако когда я открываю его на своих страницах GHPages, он обходит функцию проверки и переходит на страницу с капчей Formspree.

Чуть больше контекста (не уверен, влияет ли он) ...

Этофайл включен в мой файл index.html с помощью функции JS.Мой индекс состоит из 2 вкладок, которые загружают другой HTML при нажатии.Вот репозиторий GitHub для получения дополнительной информации: TellMeApp / support .

Что я уже пробовал:

  • Исправление функции Javascript: я знаю, что еслиВ функции возникает ошибка, отправка продолжается без проверки.
  • Создание дополнительной функции для отправки формы через JS: работает так же локально, а не в сети ...
  • ИщемРешения на Github Pages help: не нашел ничего связанного с этой темой.

Есть мысли о том, что здесь может быть не так?

Заранее благодарю!

1 Ответ

0 голосов
/ 24 ноября 2018

Вместо использования атрибута onsubmit вы можете использовать обязательный атрибут для входных данных, например: 

<label for="fname">Nome Completo</label>
<input type="text" id="fname" name="fname" placeholder="Seu nome completo..." required>

<label for="email">E-mail</label>
<input type="text" id="email" name="email" placeholder="Seu e-mail..." required>

<label for="subject">Mensagem</label>
<textarea id="subject" name="subject" placeholder="Digite algo..." style="height:200px" required></textarea>

Если вам интересно узнать больше об обязательном атрибуте, вы можете найти его здесь: HTML обязательный атрибут - W3Schools.com

...