0

I've been working on this form and have come to a roadblock. I'm trying to stop the form from submitting if it fails validation. The form itself is using formspree.io to collect the results and email them. I set out to write this in all js.

I think that because of this adding return false to the end of any validation does not work because formspree is doing something extra that I am not aware of/ don't understand.

Here is my code without the form elements but just validation logic and submit button. You can look at all the code for the form here.Any help or hints or direction would be appreciated thanks.

var app = document.createElement('form');
app.name = 'formIT'
app.action = "https://formspree.io/alaw989@gmail.com"
app.method = "POST"

//all div elements and stuff used to build the form would be here//

var submit = document.createElement('button'); 
submit.textContent = 'Submit'
app.appendChild(submit)
submit.style.cssText = "display: block; margin: 40px 0px 0px 20px; background-color: #1DA2F5; border: none; color: white; padding: 16px 32px; text-decoration: none; cursor: pointer;"
submit.type = "submit"
submit.value = "Send"

submit.addEventListener('click', function() {
   var x = emailInput.value;
   var atpos = x.indexOf("@");
   var dotpos = x.lastIndexOf(".");
     if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
        alert("Not a valid e-mail address");
    }

  var yes1 = radio1a.checked;
  var no1 = radio1b.checked;

  if (yes1 == "" && no1 == "") {
    alert("Please answer question 1")
  }

  var yes2 = radio2a.checked;
  var no2 = radio2b.checked;

  if (yes2 == "" && no2 == "") {
    alert("Please answer question 2")    
  }

  var yes3 = radio3a.checked;
  var no3 = radio3b.checked;

  if (yes3 == "" && no3 == "") {
    alert("Please answer question 3")    
  }

  var yes4 = radio4a.checked;
  var no4 = radio4b.checked;

  if (yes4 == "" && no4 == "") {
    alert("Please answer question 4")    
  }

  var yes5 = radio5a.checked;
  var no5 = radio5b.checked;

  if (yes5 == "" && no5 == "") {
    alert("Please answer question 5")    
  }

  var yes6 = radio6a.checked;
  var no6 = radio6b.checked;

  if (yes6 == "" && no6 == "") {
    alert("Please answer question 6")    
  }

   var a = input1.value
   var b = input2.value
   if (a === "") {
    alert("Missing Question 7")
   }
   if (b === "") {
     alert("Missing Question 8")
   }

});
alaw
  • 13
  • 4
  • Looks like I may have just figured out by adding a .required to the radio button elements. This seems to be a pretty good solution unless anyone had any better ideas. edit: seems like this may even eliminate the need for the all the if/else statements. – alaw Dec 10 '16 at 20:05

3 Answers3

0

For your question, I would recommend using an error-catching function or similar, which would kill the script on errors.

Check out the answer: Is it possible to stop JavaScript execution?

Community
  • 1
  • 1
Bradley Sweeten
  • 11
  • 1
0

Try

button.addEventListener('click', function() {
  var form = document.getElementById('form-id');

  event.preventDefault();

  // validations here

  if (validationsPassed) form.submit()
});
pridegsu
  • 1,108
  • 1
  • 12
  • 27
0

First of all, your radio button "checked" events should be checking for true/false not " ". Second, you have two options. You could add e in your click event and add e.preventDefault() as Matias suggested:

submit.addEventListener('click', function(e) {
    e.preventDefault();
}

Or add a function to validate form in your form tag:

<form onsubmit="validateForm();">
Sean Novick
  • 11
  • 3