How do I prevent my page from refreshing on submit

Question

Here is the JavaScript:

myform.addEventListener('submit', (event) => {
fetch("url", {mode: "no-cors"})
.then(res=> {
    if(res.ok){
        console.log("cats")
    }
    else{
        event.preventDefault()
        document.getElementById("subcim_error_message").innerHTML="You must add a title!"
        return false
    }
})})

Here is the html:

   <head>
    <title>pH Login</title>
    <link rel="stylesheet" href="../styles/ph-styles.css"/>
</head>
<body>
    <header>
        <h1>parry Hotter School for Alchemy and Pyromancy</h1>
    </header>
    <div id="hat" style="display: flex; justify-content: center;">
        <img src="https://www.renderhub.com/realityscanning/old-boot-with-plants-inside/old-boot-with-plants-inside-01.jpg" style="height: 15rem" alt="Sorting Boot"/>
    </div>
    <span class="error_form" id="subcim_error_message"></span>
    <form name="myform">
        <section class="two_columns">
            <label for="username">Username:</label>
            <input id="username" placeholder="parry Hotter" type="text"/>
            <label for="password">Password:</label>
            <input id="password" placeholder="*******" type="password" maxlength="20"/>
        </section>
        <input type="submit"/>
    </form>
    <footer>
        <h6>&copy;Copyright pHSfAaP. All rights reserved.</h6>
    </footer>
    <style>
        #hat{
            margin: 3em;
        }

        img{
            border: 1em;
            border-style: solid;
            border-color: steelblue;
        }
    </style>
    <script src="../scripts/parry-hotter-login.js"></script>
</body>

I am trying to display an error message when someone enters invalid credentials but everytime it happens the page refreshes so the error message immediately vanishes

Does this answer your question? [How to prevent buttons from submitting forms](https://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms) — Kinglish, Jun 25 '21 at 21:49
To the first comment I am using a submit button and not a regular button. To the second comment I tried e.preventDefault() and it doesn't work. — Christian Hall, Jun 25 '21 at 21:57
the default event (submit) is not going to wait for your `then` and `if/then` logic. If you want to use a submit type button, you need to prevent the default action as the first thing, in order to stop the event. Why don't you just use a button of type button instead ? — devlin carnate, Jun 25 '21 at 22:00
Nothing will work if you have an error in javascript syntax. It will error out and the form will default submit. put this in the form tag to test `
` — Kinglish, Jun 25 '21 at 22:12

score -1 · Answer 1 · edited Nov 21 '21 at 14:47

Literally by adding client site validation. As per the MDN:

Before submitting data to the server, it is important to ensure all required form controls are filled out, in the correct format. This is called client-side form validation, and helps ensure data submitted matches the requirements set forth in the various form controls. This article leads you through basic concepts and examples of client-side form validation.

Then there's server side validation of course. For that you could setup focus or keypress event handlers to validate input and add some UI hints, e.g., messages, colors, checkmarks, and toggle the submit button state.

UPDATE

Here's a snippet that adds the required attribute to the inputs (client-side validation) and a handler for the submit event (server-side validation). The trick to cancelling submission of a form is for the onsubmit handler to return false.

document.getElementById('myform').onsubmit = function()
{
  // mock response
  res = { status: "failed", reason: "the user name does not exist." };
 
  if (res.status !== "ok")
  {
    alert(res.reason);
    return false;
  }
 
  return true;
 }

<head>
    <title>pH Login</title>
    <link rel="stylesheet" href="../styles/ph-styles.css"/>
</head>
<body>
    <header>
        <h1>parry Hotter School for Alchemy and Pyromancy</h1>
    </header>
    <div id="hat" style="display: flex; justify-content: center;">
        <img src="https://www.renderhub.com/realityscanning/old-boot-with-plants-inside/old-boot-with-plants-inside-01.jpg" style="height: 15rem" alt="Sorting Boot"/>
    </div>
    <span class="error_form" id="subcim_error_message"></span>
    <form id="myform">
        <section class="two_columns">
            <label for="username">Username:</label>
            <input id="username" placeholder="parry Hotter" type="text" required/>
            <label for="password">Password:</label>
            <input id="password" placeholder="*******" type="password" maxlength="20" required/>
        </section>
        <input type="submit"/>
    </form>
    <footer>
        <h6>&copy;Copyright pHSfAaP. All rights reserved.</h6>
    </footer>
    <style>
        #hat{
            margin: 3em;
        }

        img{
            border: 1em;
            border-style: solid;
            border-color: steelblue;
        }
    </style>
    <script src="../scripts/parry-hotter-login.js"></script>
</body>

How do I prevent my page from refreshing on submit

1 Answers1