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

Answer 1

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>

Answer 2

Pass the event to the form validation function

onsubmit="return validateForm(e)"

Then prevent default submission using

e.preventDefault();

Answer 3

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.