在将数据发送到PHP脚本之前，Javascript重新加载页面

Background: I want to create a login form, the user input the "user ID" and "password". My JavaScript file checks certain parameters. If the data does not comply with them the my page is re-load. If the data is approved then after checking in JavaScript my PHP script kicks in and does other stuff.

Question: the problem I am having is that even though the data is not complaint with the JavaScript check up my page is not re-loading. It keeps sending the data to my PHP script.

Which is want I do not want.

I want to re-loed the same page and not send to PHP. I want to send the data to PHP when the data has passed the JavaScript check up.

CODE:

HTML SECTION

JavaScript SECTION

Thank you

If you guys can suggest a way to approach this situation it would be great.

Thank you.

Your approach is incorrect , you don't need to reload the page in case of none valid entries , I would suggest doing something similar to the following :

function checkForm(){
  if(document.getElementById("whatever").value != 'xyz') {
    console.log("False !")
    return false;
  }
  return true
}

<form action="something.php" onsubmit="return checkForm()">
<input type="text" id="whatever">
<input type="submit">
</form>

</div>