How can I prevent my form from being submitted?

Question

I want the form to not be submitted when the inputs are wrong. The error messages do appear but my form still gets submitted nonetheless. I cant seem to find the problem would appreciate the help thank you :)-----------------------------------------------------------------------------------------------------

<form action="/handleServer.php" method="get" onsubmit="return validateForm()"> <!-- starting with first name--> <h4 class="heading" >First name:</h4> <input id="fname" type="text" name="fname" size="30"> <span id="errorName" class="error"></span> <!-- module code --> <h4 class="heading">Module code:</h4> <input id="mcode" type="text" name="mcode" size="30"> <span id="errorCode" class="error"></span> <input type="submit" value="Submit"> </form> <script> //input field using if-else statements function validateForm() { var fname = document.getElementById("fname").value; var mcode = document.getElementById("mcode").value; var errorN = document.getElementById("errorName"); var errorC = document.getElementById("errorCode"); //test for an empty input if (fname === '' && mcode === '') { errorN.innerHTML = "Please fill in the blank"; errorC.innerHTML = "Please fill in the blank"; return false; } if (fname === '') { errorN.innerHTML = "Please fill in the blank"; return false; } else { errorN.innerHTML = ""; } if (mcode === '') { errorC.innerHTML = "Please fill in the blank"; return false; } else { errorC.innerHTML = ""; } //test for invalid format if (/^[A-Z]\D{2,30}$/.test(fname) == false) //if its true, it will go to the second input { errorN.innerHTML = "One capital letter and no digits allowed"; fname.style.color="red"; return false; } else { fname.innerHTML = ""; } if (/^[a-z]{3}[1-9]\d{4}$/.test(mcode) == false) { errorC.innerHTML = "Wrong format"; mcode.style.color="red"; return false; } else { mcode.innerHTML = ""; } return true; }

Does this answer your question? How to prevent form from being submitted? — Randy Casburn
– Randy Casburn, Commented Oct 23, 2020 at 3:15
Hi sorry i thnk i may have phrased my question wrongly, my form actually gets redicrected when the input values are wrong @SridharChidurala — HelpAGirlOut
– HelpAGirlOut, Commented Oct 23, 2020 at 3:31

luek baja · Accepted Answer · 2020-10-24 04:05:20Z

The problem seems to be these four lines of code:

fname.style.color="red"; fname.innerHTML = ""; mname.style.color="red"; mname.innerHTML = "";

fname and mname are strings, therfore fname.style and mname.style both result in undefined. Obviously you can't set properties on undefined which is why you are getting an error.

//You are getting the value properties which are strings: var fname = document.getElementById("fname").value; var mcode = document.getElementById("mcode").value;

The error is stopping your code before you can return false, preventing the cancelation of the form submit.

The solution is to instead make two more variables storing the actual input elements:

var finput = document.getElementById("fname"); var minput = document.getElementById("mname");

Then change lines:

fname.style.color="red"; fname.innerHTML = ""; mname.style.color="red"; mname.innerHTML = "";

to:

finput.style.color="red"; finput.innerHTML = ""; minput.style.color="red"; minput.innerHTML = "";

Here is a working version:

<form action="/handleServer.php" method="get" onsubmit="return validateForm()"> <!-- starting with first name--> <h4 class="heading">First name:</h4> <input id="fname" type="text" name="fname" size="30"> <span id="errorName" class="error"></span> <!-- module code --> <h4 class="heading">Module code:</h4> <input id="mcode" type="text" name="mcode" size="30"> <span id="errorCode" class="error"></span> <input type="submit" value="Submit"> </form> <script> //input field using if-else statements function validateForm() { var finput = document.getElementById("fname"); var minput = document.getElementById("mname"); var fname = document.getElementById("fname").value; var mcode = document.getElementById("mcode").value; var errorN = document.getElementById("errorName"); var errorC = document.getElementById("errorCode"); //test for an empty input if (fname === '' && mcode === '') { errorN.innerHTML = "Please fill in the blank"; errorC.innerHTML = "Please fill in the blank"; return false; } if (fname === '') { errorN.innerHTML = "Please fill in the blank"; return false; } else { errorN.innerHTML = ""; } if (mcode === '') { errorC.innerHTML = "Please fill in the blank"; return false; } else { errorC.innerHTML = ""; } //test for invalid format if (/^[A-Z]\D{2,30}$/.test(fname) == false) //if its true, it will go to the second input { errorN.innerHTML = "One capital letter and no digits allowed"; finput.style.color = "red"; return false; } else { finput.innerHTML = ""; } if (/^[a-z]{3}[1-9]\d{4}$/.test(mcode) == false) { errorC.innerHTML = "Wrong format"; minput.style.color = "red"; return false; } else { minput.innerHTML = ""; } return true; } </script>

yeh is not suppose to redirect if the two inputs are wrong :(
@HelpAGirlOut I have fixed my answer and it works how you want now I think.

ReallyMadeMeThink · Accepted Answer · 2020-10-23 03:14:59Z

0

Pass the event to the form validation function

onsubmit="return validateForm(e)"

Then prevent default submission using

e.preventDefault();

answered Oct 23, 2020 at 3:14

ReallyMadeMeThink

1,0818 silver badges13 bronze badges

1 Comment

luek baja Over a year ago

If you are returning false with the validation function this is not reqired as the redirect will already be canceled.

Clint_A · Accepted Answer · 2020-10-24 04:19:30Z

Your return statement should be inside a condition. Right now you're existing the condition and ending the function with a return true; regardless of what the conditional statements have already returned. So:

if (fname === '' && mcode === '') { errorN.innerHTML = "Please fill in the blank"; errorC.innerHTML = "Please fill in the blank"; return false; }else{ return true; // THIS IS WHERE YOU NEED TO RETURN TRUE }

I see you're returning false in multiple if statements. You'll need to find a way to unify the conditions so that you have one return only for for either true or false.

Collectives™ on Stack Overflow

How can I prevent my form from being submitted?

3 Answers 3

2 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Linked

Related