`Required` attribute not working with <form> tag

Question

My required attribute doesn't specify that an input field must be filled out before submitting the form.

HTML:

<!-- Modal Content -->
            <form class="modal-content2">
                <div class="container3">
                    <h1>Sign Up</h1>
                    <p>Please fill in this form to create an account.</p>
                    <hr>
                    <label for="firstName"><b>First Name</b></label>
                    <input type="text" id="firstName" placeholder="Enter First Name" name="firstName" required>

                    <label for="lastName"><b>Last Name</b></label>
                    <input type="text" id="lastName" placeholder="Enter Last Name" name="lastName" required>

                    <label for="username"><b>Username</b></label>
                    <input type="text" id="username" placeholder="Enter Username" name="username" required>

                    <label for="email"><b>Email</b></label>
                    <input type="text" id="email" placeholder="Enter Email" name="email" required>

                    <label for="psw"><b>Password</b></label>
                    <input type="password" id="password" placeholder="Enter Password" name="psw" onfocus="this.value=''"
                        required>

                    <label for="psw-confirm"><b>Confirm Password</b></label>
                    <input type="password" id="cfmpassword" placeholder="Confirm Password" name="psw-confirm" onfocus="this.value=''"
                        required>

                    <br>
                    <br>
                    <p>By creating an account you agree to our <a href="aboutus.html" style="color:dodgerblue">Terms &
                            Privacy</a>.</p>

                    <div class="clearfix">
                        <button type="button" onclick="document.getElementById('id02').style.display='none'" class="cancelbtn2">Cancel</button>
                        <button type="button" class="signupbtn" onclick="signUp()">Sign Up</button>
                    </div>
                </div>
            </form>

JavaScript:

function signUp() {
    if (document.getElementById("password").value == document.getElementById("cfmpassword").value) {
        var users = new Object();
        users.firstName = document.getElementById("firstName").value;
        users.lastName = document.getElementById("lastName").value;
        users.username = document.getElementById("username").value;
        users.email = document.getElementById("email").value;
        users.password = document.getElementById("password").value;


        var postUser = new XMLHttpRequest(); // new HttpRequest instance to send user details

        postUser.open("POST", "/users", true); 

        postUser.setRequestHeader("Content-Type", "application/json");

        postUser.send(JSON.stringify(users));

        //go to the logged in page
        window.location = "main.html";
    }
    else {
        alert("Password column and Confirm Password column doesn't match!")
    }
}

As the required attribute does not work, users can continuously submit empty forms and those will be stored in my SQL database

I don't have a <button type="submit"> in the form as this prevents me from using windows.location.

I am new to programming, can someone please give some suggestions (with explanations) on what to do to fix this? Any help would be appreciated! Thanks a lot! (I am using vanilla JavaScript for this)

Answer 1

The required attribute does not work because your form is not submitted. You need to specify a button with a type="submit" or <input type="submit"> to submit your form.

I suggest you to move the signUp function inside the form tag like this with an onsubmit event:

<form onsubmit="signUp(event)">.

Then add this to you Javascript function:

function signUp(event) { event.preventDefault(); ... your old code }