HTML Form onSubmit being bypassed

I’m new to HTML and JS and I’m trying to setup a “Contact” page using GitHub Pages. I am using formspree.io to submit the forms and e-mail to the app mail account.

Here is the deal: I’m trying to setup a simple validation just to verify if the form fields aren’t empty (there is no need for a server-side validation), but the “onSubmit” response seems to be bypassed every single time.

Here is my contact.html file:

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

JavaScript
​x
 
<!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>

If I open the file locally on Google Chrome, it works just fine, the alerts show up and the form is not submitted until all fields have been filled. When I open it on my GHPages, however, it bypasses the validate function and proceeds to Formspree captcha page.

A little bit more context (not sure if it influences)…

This file is being included on my index.html file using a JS function. My index consists of 2 tabs that load a different HTML when clicked. Here is the GitHub repo for more information: TellMeApp/support.

What I have already tried:

Correcting the Javascript function: I am aware that if an error is raised on the function, the submission follows on without validation.
Creating an additional function to submit the form via JS: works the same locally, not online…
Looking for solutions on Github Pages help: did not found anything related to this subject.

Any thoughts on what could be wrong here?

I thank you in advance!

Answer

Instead of using the onsubmit attribute, you can use the required attribute for the inputs like so:

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

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

If you are interested in reading more about the required attribute, you can find it here: HTML required Attribute – W3Schools.com

Advertisement

Answer