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; }

This should help https://stackoverflow.com/questions/3350247/how-to-prevent-form-from-being-submitted — Sridhar Chidurala, Oct 23 '20 at 03:13
Does this answer your question? [How to prevent form from being submitted?](https://stackoverflow.com/questions/3350247/how-to-prevent-form-from-being-submitted) — Randy Casburn, Oct 23 '20 at 03: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, Oct 23 '20 at 03:31

luek baja · Answer 1 · 2020-10-24T04:05:20.980

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, Oct 23 '20 at 03:25
@HelpAGirlOut I have fixed my answer and it works how you want now I think. — luek baja, Oct 24 '20 at 04:10

score 0 · Answer 2 · answered Oct 23 '20 at 03:14

0

Pass the event to the form validation function

onsubmit="return validateForm(e)"

Then prevent default submission using

e.preventDefault();

answered Oct 23 '20 at 03:14

ReallyMadeMeThink

1,061
7
11

If you are returning false with the validation function this is not reqired as the redirect will already be canceled. – luek baja Oct 23 '20 at 03:16

score 0 · Answer 3 · answered Oct 24 '20 at 04:19

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.

How can I prevent my form from being submitted?

3 Answers3