HTML Form onSubmit being bypassed
0
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>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!
javascript html github-pages
asked Nov 23 '18 at 20:51
Rafael Tomaz PradoRafael Tomaz Prado
33
add a comment |
0
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>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!
javascript html github-pages
asked Nov 23 '18 at 20:51
Rafael Tomaz PradoRafael Tomaz Prado
33
I don't recommend using onsubmit as an attribute, but it should look like this:onsubmit="validate"
– Get Off My Lawn
Nov 23 '18 at 20:58
Thanks @GetOffMyLawn, will try that!
– Rafael Tomaz Prado
Nov 23 '18 at 21:17
1
@GetOffMyLawn While you're definitely right about not using event attributes, the rest of what you wrote is just not true. The string set on the attributeonsubmitgets evaluated as any other piece of code, and thus"validate"just references the function and accomplishes nothing. OP's code is correct.
– Lennholm
Nov 23 '18 at 21:18
@RafaelTomazPrado Since you mention it's working fine in Chrome when running locally, the issue isn't with your code but rather something related to having it hosted on and running from Github Pages
– Lennholm
Nov 23 '18 at 21:21
@Lennholm is right, changing the attribute did nothing. I still don't know if the problem is on GitHub Pages, but the answer from Devtician below sure worked. Thanks for your time.
– Rafael Tomaz Prado
Nov 23 '18 at 21:34
add a comment |
0
0
0
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>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!
javascript html github-pages
asked Nov 23 '18 at 20:51
Rafael Tomaz PradoRafael Tomaz Prado
33
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>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!
<!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><!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 html github-pages
javascript html github-pages
asked Nov 23 '18 at 20:51
Rafael Tomaz PradoRafael Tomaz Prado
33
asked Nov 23 '18 at 20:51
Rafael Tomaz PradoRafael Tomaz Prado
33
asked Nov 23 '18 at 20:51
Rafael Tomaz PradoRafael Tomaz Prado
33
asked Nov 23 '18 at 20:51
Rafael Tomaz PradoRafael Tomaz Prado
33
asked Nov 23 '18 at 20:51
Rafael Tomaz PradoRafael Tomaz Prado
33
33
I don't recommend using onsubmit as an attribute, but it should look like this:onsubmit="validate"
– Get Off My Lawn
Nov 23 '18 at 20:58
Thanks @GetOffMyLawn, will try that!
– Rafael Tomaz Prado
Nov 23 '18 at 21:17
1
@GetOffMyLawn While you're definitely right about not using event attributes, the rest of what you wrote is just not true. The string set on the attributeonsubmitgets evaluated as any other piece of code, and thus"validate"just references the function and accomplishes nothing. OP's code is correct.
– Lennholm
Nov 23 '18 at 21:18
@RafaelTomazPrado Since you mention it's working fine in Chrome when running locally, the issue isn't with your code but rather something related to having it hosted on and running from Github Pages
– Lennholm
Nov 23 '18 at 21:21
@Lennholm is right, changing the attribute did nothing. I still don't know if the problem is on GitHub Pages, but the answer from Devtician below sure worked. Thanks for your time.
– Rafael Tomaz Prado
Nov 23 '18 at 21:34
add a comment |
I don't recommend using onsubmit as an attribute, but it should look like this:onsubmit="validate"
– Get Off My Lawn
Nov 23 '18 at 20:58
Thanks @GetOffMyLawn, will try that!
– Rafael Tomaz Prado
Nov 23 '18 at 21:17
1
@GetOffMyLawn While you're definitely right about not using event attributes, the rest of what you wrote is just not true. The string set on the attributeonsubmitgets evaluated as any other piece of code, and thus"validate"just references the function and accomplishes nothing. OP's code is correct.
– Lennholm
Nov 23 '18 at 21:18
@RafaelTomazPrado Since you mention it's working fine in Chrome when running locally, the issue isn't with your code but rather something related to having it hosted on and running from Github Pages
– Lennholm
Nov 23 '18 at 21:21
@Lennholm is right, changing the attribute did nothing. I still don't know if the problem is on GitHub Pages, but the answer from Devtician below sure worked. Thanks for your time.
– Rafael Tomaz Prado
Nov 23 '18 at 21:34
I don't recommend using onsubmit as an attribute, but it should look like this:
onsubmit="validate"– Get Off My Lawn
Nov 23 '18 at 20:58
I don't recommend using onsubmit as an attribute, but it should look like this:
onsubmit="validate"– Get Off My Lawn
Nov 23 '18 at 20:58
Thanks @GetOffMyLawn, will try that!
– Rafael Tomaz Prado
Nov 23 '18 at 21:17
Thanks @GetOffMyLawn, will try that!
– Rafael Tomaz Prado
Nov 23 '18 at 21:17
1
1
@GetOffMyLawn While you're definitely right about not using event attributes, the rest of what you wrote is just not true. The string set on the attribute
onsubmit gets evaluated as any other piece of code, and thus "validate" just references the function and accomplishes nothing. OP's code is correct.– Lennholm
Nov 23 '18 at 21:18
@GetOffMyLawn While you're definitely right about not using event attributes, the rest of what you wrote is just not true. The string set on the attribute
onsubmit gets evaluated as any other piece of code, and thus "validate" just references the function and accomplishes nothing. OP's code is correct.– Lennholm
Nov 23 '18 at 21:18
@RafaelTomazPrado Since you mention it's working fine in Chrome when running locally, the issue isn't with your code but rather something related to having it hosted on and running from Github Pages
– Lennholm
Nov 23 '18 at 21:21
@RafaelTomazPrado Since you mention it's working fine in Chrome when running locally, the issue isn't with your code but rather something related to having it hosted on and running from Github Pages
– Lennholm
Nov 23 '18 at 21:21
@Lennholm is right, changing the attribute did nothing. I still don't know if the problem is on GitHub Pages, but the answer from Devtician below sure worked. Thanks for your time.
– Rafael Tomaz Prado
Nov 23 '18 at 21:34
@Lennholm is right, changing the attribute did nothing. I still don't know if the problem is on GitHub Pages, but the answer from Devtician below sure worked. Thanks for your time.
– Rafael Tomaz Prado
Nov 23 '18 at 21:34
add a comment |
1 Answer
1
active
oldest
votes
0
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>
If you are interested in reading more about the required attribute, you can find it here: HTML required Attribute - W3Schools.com
answered Nov 23 '18 at 21:05
DevticianDevtician
266
Thank you, I will try that!
– Rafael Tomaz Prado
Nov 23 '18 at 21:18
@RafaelTomazPrado You are very welcome!
– Devtician
Nov 23 '18 at 21:21
Worked like a charm! And also, thanks for the reference link.
– Rafael Tomaz Prado
Nov 23 '18 at 21:25
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53452814%2fhtml-form-onsubmit-being-bypassed%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
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>
If you are interested in reading more about the required attribute, you can find it here: HTML required Attribute - W3Schools.com
answered Nov 23 '18 at 21:05
DevticianDevtician
266
Thank you, I will try that!
– Rafael Tomaz Prado
Nov 23 '18 at 21:18
@RafaelTomazPrado You are very welcome!
– Devtician
Nov 23 '18 at 21:21
Worked like a charm! And also, thanks for the reference link.
– Rafael Tomaz Prado
Nov 23 '18 at 21:25
add a comment |
0
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>
If you are interested in reading more about the required attribute, you can find it here: HTML required Attribute - W3Schools.com
answered Nov 23 '18 at 21:05
DevticianDevtician
266
Thank you, I will try that!
– Rafael Tomaz Prado
Nov 23 '18 at 21:18
@RafaelTomazPrado You are very welcome!
– Devtician
Nov 23 '18 at 21:21
Worked like a charm! And also, thanks for the reference link.
– Rafael Tomaz Prado
Nov 23 '18 at 21:25
add a comment |
0
0
0
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>
If you are interested in reading more about the required attribute, you can find it here: HTML required Attribute - W3Schools.com
answered Nov 23 '18 at 21:05
DevticianDevtician
266
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>
If you are interested in reading more about the required attribute, you can find it here: HTML required Attribute - W3Schools.com
answered Nov 23 '18 at 21:05
DevticianDevtician
266
answered Nov 23 '18 at 21:05
DevticianDevtician
266
answered Nov 23 '18 at 21:05
DevticianDevtician
266
answered Nov 23 '18 at 21:05
DevticianDevtician
266
266
Thank you, I will try that!
– Rafael Tomaz Prado
Nov 23 '18 at 21:18
@RafaelTomazPrado You are very welcome!
– Devtician
Nov 23 '18 at 21:21
Worked like a charm! And also, thanks for the reference link.
– Rafael Tomaz Prado
Nov 23 '18 at 21:25
add a comment |
Thank you, I will try that!
– Rafael Tomaz Prado
Nov 23 '18 at 21:18
@RafaelTomazPrado You are very welcome!
– Devtician
Nov 23 '18 at 21:21
Worked like a charm! And also, thanks for the reference link.
– Rafael Tomaz Prado
Nov 23 '18 at 21:25
Thank you, I will try that!
– Rafael Tomaz Prado
Nov 23 '18 at 21:18
Thank you, I will try that!
– Rafael Tomaz Prado
Nov 23 '18 at 21:18
@RafaelTomazPrado You are very welcome!
– Devtician
Nov 23 '18 at 21:21
@RafaelTomazPrado You are very welcome!
– Devtician
Nov 23 '18 at 21:21
Worked like a charm! And also, thanks for the reference link.
– Rafael Tomaz Prado
Nov 23 '18 at 21:25
Worked like a charm! And also, thanks for the reference link.
– Rafael Tomaz Prado
Nov 23 '18 at 21:25
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53452814%2fhtml-form-onsubmit-being-bypassed%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I don't recommend using onsubmit as an attribute, but it should look like this:
onsubmit="validate"– Get Off My Lawn
Nov 23 '18 at 20:58
Thanks @GetOffMyLawn, will try that!
– Rafael Tomaz Prado
Nov 23 '18 at 21:17
1
@GetOffMyLawn While you're definitely right about not using event attributes, the rest of what you wrote is just not true. The string set on the attribute
onsubmitgets evaluated as any other piece of code, and thus"validate"just references the function and accomplishes nothing. OP's code is correct.– Lennholm
Nov 23 '18 at 21:18
@RafaelTomazPrado Since you mention it's working fine in Chrome when running locally, the issue isn't with your code but rather something related to having it hosted on and running from Github Pages
– Lennholm
Nov 23 '18 at 21:21
@Lennholm is right, changing the attribute did nothing. I still don't know if the problem is on GitHub Pages, but the answer from Devtician below sure worked. Thanks for your time.
– Rafael Tomaz Prado
Nov 23 '18 at 21:34