Making HTML/Javascript form submission asynchronous-CodePudding

I currently have a form with a few variables like username, password, and email which sends the data to a node.js server. Before sending the data, I have a few checks such as whether the inputs are valid and whether the email already exists in my file. The checking aspect of my code works, however the javascript function which I use to check returns before opening the file to check for duplicate emails. I feel that if I could somehow make the onsubmit function asynchronous, that would help.

Here is my code and the segment where I check for duplicate emails is near the end:

<html>
  <body>

    <form id='form' action="/signup.html" method="POST" onsubmit="return submitIt();">
      <div style="text-align:center">
        <label for="name">Full Name</label><br>
        <input type="text" size="100" id="name" name="name" placeholder="Enter Your Full Name: "><br><br>
        <label for="email">Email</label><br>
        <input type="text" size="100" id="email" name="email" placeholder="Enter Your Email: "><br><br>
        <label for="password">Password</label><br>
        <input type="text" size="100" id="password" name="password" placeholder="Enter Your Password: "><br><br>
        <button type="submit" id="submit">Submit</button>
      </div>
    </form>
  </body>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
        var ret = true;
        async function submitIt() {
            let name = document.getElementById("name").value;
            let email = document.getElementById("email").value;
            let password = document.getElementById("password").value;

            if (name == "" || name.length < 4) {
                document.getElementById("name").value = "";
                document.getElementById("name").placeholder = "Please enter a real name";
                ret = false;
            }
            if (email == "" || email.length < 4) {
                document.getElementById("email").value = "";
                document.getElementById("email").placeholder = "Please enter a real email";
                ret = false;
            }
            if (ret) {
                let found = false;
                for (let i = 0; i < email.length; i  ) {
                    if (email[i] == '@') {
                    found = true;
                    }
                }
                if (!found) {
                    document.getElementById("email").value = "";
                    document.getElementById("email").placeholder = "Please enter a real email";
                    ret = false;
                }
            }

            if (password.length < 5) {
                document.getElementById("password").value = "";
                document.getElementById("password").placeholder = "Password must be atleast 5 characters.";
                ret = false;
            }

            await $.ajax({
                type:"POST",
                url:'/getUsers',
                dataType: "text",
                success: function(content) {
                    let contents = content.split('\n');
                    for (let i = 0; i < contents.length; i  = 3) {
                        if (contents[i] == email) {
                            document.getElementById("email").value = "";
                            document.getElementById("email").placeholder = "Email already in use.";
                            ret = false;
                        }
                    }
                }
            });
            return ret;
        }
        
    </script>
  </head>
</html>

Any help would be greatly appreciated!

CodePudding user response：

Have you tried moving onSumbmit call from form to the button?

const submitButton = document.getElementById(***)

submitButton.addEventListener('click', () => {your code})

Another way could be preventing default behavior of the submit form.

async function submitIt(event) {
event.preventDefault;
event.stopImmediatePropagation;
....your code....
}

I don't have access to a PC right now to check it, but one of the provided solutions should work. Cheers!