Form Submission Going Through

Question

I've written a function which SHOULD prevent anything from being submitted unless two conditions are true - namely that values have been put into each of the required categories, and if there are values in every category, that a valid phone number has been submitted.

Instead, what is happening right now is I'll get the error message, but then it will submit the form anyway. I'm not seeing the error in my code, can you see anything?

function formValidation() { var ids = ["orgname", "cultpicklist", "catpicklist", "servpicklist", "phone", "add1", "url", "state"] // required fields formValue = 1; // value indicating whether to go to the next step of the process, phone number validation. On by default. if (document.getElementById('deletebutton') != null && document.getElementById('orgname').value === "") { formValue = 0; // A separate test for when the delete button is clicked. } else { for (var i = 0, len = ids.length; i < len; i++) { if (document.getElementById(ids[i]).value === "") { formValue = 0; // Testing each of the list items break; } } } // Here's the part where, if everything else passes checks, we have a regex test for phone number validation if (formValue == 1) { phoneVal = document.getElementById("phone"); if (/^\d{3}-\d{3}-\d{4}$/.test(phoneVal) || /^\d{10}$/.test(phoneVal) || /^\(\d{3}\) \d{3}-\d{4}$/.test(phoneVal)) { return true; } else { alert("Please put in a correct phone number"); return false; // This shouldn't submit, but does. }} else if (formValue == 0) { alert('Please fill out all required fields'); return false; // This also shouldn't submit, but does as well. } }

can you paste HTML part where you are calling this function. It should have onSubmit="return formValidation()" — Pradeep
– Pradeep, Commented Dec 6, 2011 at 14:17
This function itself looks fine at first glance. How are you calling it? I think it would need to be from an "onsubmit" handler to be able to stop the form submission. — Sean McMains
– Sean McMains, Commented Dec 6, 2011 at 14:17
I'm missing some context. Where do you call this function? onsubmit? — Iljaas
– Iljaas, Commented Dec 6, 2011 at 14:20

Gabriele Petrioli · Accepted Answer · 2011-12-06 14:18:53Z

1

I am assuming that in your html you have something like this

<form .... onsubmit="formValidation()">

It should be

<form .... onsubmit="return formValidation()">

answered Dec 6, 2011 at 14:18

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Steven Matthews Over a year ago

This seems to have worked for form submission. Need to work on my regex, though!

Gabriele Petrioli Over a year ago

@Andrew what is wrong with the regex ? It currently handles 123-456-7890, 1234567890 and finally (123) 456-7890.

Navigatron Over a year ago

Why is it necessary to have 'return'?

Gabriele Petrioli Over a year ago

@Nuktu, read devguru.com/technologies/ecmascript/quickref/…

Jeffrey Sweeney · Accepted Answer · 2011-12-06 14:20:34Z

Is this function called from the submit button?

submit buttons will submit the form regardless of what the javascript tells it to do. Consider using a plain old button and using the form's submit() function.

http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml

<!DOCTYPE html> <html> <head> </head> <body> <form name="form" action="no.html"> <input type="button" value="submit" onmousedown="dontSub()" /> </form> </body> <script> function dontSub() { var good = false; if(good) { document.forms["form"].submit(); } } </script> </html>

Collectives™ on Stack Overflow

Form Submission Going Through

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related