Hello. My HTML form is submitting with validation from JavaScript, but when it submits I don’t get the form input value, though it was inserted. I’ve checked through so many similar asked questions but it’s still the same. I’m not receiving the form input values in my netlify dashboard and email.
Hiya, sorry you are having trouble getting your forms to work.
This Support Guide is the first port of call to debug any forms issues. Please start here and work through these resources!
We also recommend trying to search the forums or look at topics tagged Netlify forms if you haven’t already - it’s likely your question was already asked by someone else!
If you are still having problems, please provide more information such as what you have already tried, and a link to your live form. 
Thanks for your response, but I’ve tried everything possible solution and it’s still not working. Here’s my HTML code below.
<form name="Contact" method="POST" data-netlify="true" netlify-honeypot="bot-field" id="formSubmit">
<div class="fields">
<div class="field">
<input class="user" type="text" placeholder="Name" name="Name">
</div>
<div class="field">
<input class="email" type="email" placeholder="Email" name="Email">
</div>
</div>
<div class="field">
<input class="subject" type="text" placeholder="Subject" name="Subject">
</div>
<div class="field txtarea">
<textarea class="textarea" id="" cols="30" rows="10" placeholder="Describe Project..." name="Message"></textarea>
</div>
<div class="captcha">
<div data-netlify-recaptcha="true" class="spamDetection"></div>
</div>
<div class="">
<button class="btn" type="submit">Send Message</button>
</div>
</form>
let form = document.querySelector("#formSubmit");
let msg = document.querySelector(".conf-msg");
let user = document.querySelector(".user");
let email = document.querySelector(".email");
let subject = document.querySelector(".subject");
let comment = document.querySelector(".textarea");
//console.log(form);
let submitForm = (e) => {
if(user.value.trim() == "" || email.value.trim() == "" || subject.value.trim() == "" || comment.value.trim() == ""){
msg.classList.add("error");
msg.innerHTML = "Please fill in all fields"
user.style.border = "1px solid #a00000";
email.style.border = "1px solid #a00000";
subject.style.border = "1px solid #a00000";
comment.style.border = "1px solid #a00000";
setTimeout( () => {
msg.classList.remove("error");
msg.innerHTML = "";
user.style.border = "1.5px solid #777777";
email.style.border = "1.5px solid #777777";
subject.style.border = "1.5px solid #777777";
comment.style.border = "1.5px solid #777777";
}, 3000);
e.preventDefault();
return false
}
else if (user.value.trim() !== "" || email.value.trim() !== "" || subject.value.trim() !== "" || comment.value.trim() !== ""){
user.value = "";
email.value = "";
subject.value = "";
comment.value = "";
msg.classList.add("success");
msg.innerHTML = "Sent Successfully, Thank you.";
setTimeout( () => {
msg.classList.remove("success");
msg.innerHTML = "";
}, 3000);
// form.submit();
return true;
}
return;
}
form.addEventListener("submit", submitForm);
So this is the code, and like I said it validates and works well but I don’t receive any input form values from it, even if they were given by the user. It comes up like this without the values.
Does the form submit data when you disable your javascript validation script?
I haven’t tried that yet. I’d try it now.
But how then would I validate my form?
We’ll get to that bit, just want to make sure what the culprit is first.
This time around after I commented the JavaScript validation code, it’s submitting and showing the success page, but I’m not even receiving anything back at all. It’s all blank.
I must be missing something, I don’t see it. Anyway: I wrote a form with some basic custom validation based on the example in the Netlify Forms documentation that has all the fields you need. Feel free to use it:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Netlify form</title>
<style>
.error {
border: 1px solid red;
}
</style>
</head>
<body>
<form id="form" name="contact" method="POST" data-netlify="true" data-netlify-recaptcha="true">
<p>
<label>Your Name: <input class="validate" type="text" name="name" /></label>
<p>
<label>Your Email: <input class="validate" type="email" name="email" /></label>
</p>
<p>
<label>Subject <input class="validate" type="text" name="subject" /></label>
</p>
<label>Message: <textarea class="validate" name="message"></textarea></label>
</p>
<div data-netlify-recaptcha="true"></div>
<p>
<button type="submit">Send</button>
</p>
</form>
</body>
</html>
const form = document.querySelector("#form");
const submitForm = (e) => {
e.preventDefault();
const inputs = document.querySelectorAll('.validate');
const invalidFields = Array.from(inputs).filter(input => input.value === "");
if (invalidFields.length > 0) {
invalidFields.forEach((field) => {
field.classList.add('error')
})
return false;
} else {
form.submit();
}
}
form.addEventListener("submit", submitForm);
1 Like
Ok, thanks I’d try this out now.
Thanks a bunch, I’m receiving the values now. But I honestly still don’t know the problem. I’m thinking it cause of my input names where starting with uppercase. Like it was set as name=“Name”. But I’m not sure . Anyways, thanks.
You’re welcome. If you need some more help, let me know!
Yeah sure. Had to make some changes to your code, hope you don’t mind 
? Anyways thanks, it’s all working fine now.
Haha well no, I don’t, I wrote it for you to use 
1 Like
I finally figured out the problem. In my JavaScript code I was clearing the form input values before submitting. I feel so stupid right now 
Thanks for your help once again.
1 Like