Why isn't my function being called on submit?

Trying to call validateAndConfirm function on submit of below form but nothing is happening - please help

HTML Form-

<div id='form' class='center text'>
<form method='post' onsumbmit='validateAndConfirm'>
<label for="firstname">First Name:</label>
<input type="text" name="firstname" id="firstname" placeholder='Your first name...' autocomplete='given-name' required>
<br>
<label for="lastname">Last Name:</label>
<input type="text" id="lastname" name="lastname" placeholder='Your last name...' autocomplete='family-name' required>
<br>
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" placeholder="youremail@mail.co.nz..." autocomplete='off' required>
<br>
<label for="confemail">Confirm Email Address:</label>
<input type="email" id="confemail" name="confemail" placeholder="youremail@mail.co.nz..." autocomplete='off' required>
<br>
<label for="phone">Contact Number:</label>
<input type="tel" id="phone" name="phone" pattern='[0-9]{2-3}[0-9]{2-3}[0-9]{3-4}' placeholder='000 000 0000' autocomplete='tel-national' required>
<br>
<label for="address"> Address:</label>
<input type="text" id="address" name="address" placeholder='Your address...' autocomplete='address' required>
<br>
<label for="gender"> Gender:</label>
<select name="gender" id="gender" autocomplete='gender' required>
<option value=''>Select...</option>
<option value="gen">Gender Diverse</option>
<option value="f">Female</option>
<option value="m">Male</option>
<option value="pnts">Prefer not to say</option>
</select>
<button class='center' type="submit" value='Signup'>Signup
</button>
</form>
</div>

JS function-

function validateAndConfirm() {
let firstname = document.getElementById('firstname').value;
let lastname = document.getElementById('lastname').value;
let email = document.getElementById('email').value;
let confemail = document.getElementById('confemail').value;
let phone = document.getElementById('phone').value;
let address = document.getElementById('address').value;
let gender = document.getElementById('gender').value;
if (email == confemail) {
alert('Your details have been submitted as below and your card will be sent out within the next 5 business days. /n First name: ' + firstname + ' /n Last name: ' + lastname + ' /n Email: ' + email + ' /n Phone ' + phone + ' /n Address: ' + address + ' /n Gender: ' + gender + '');
return true;
} else {
alert('Emails do not match, please amend and try again.');
return false;
}
}

I am expecting this to check the emails match and if true display alert box saying "Your details have been submitted as below and your card will be sent out within the next 5 business days.
First name: firstname entered
Last name: lastname entered
Email: email entered
Phone: phone entered
Address: address entered
Gender: gender entered

If false it would ask to check emails and try again.

1. Your submit button is outside the form so it doesn't try to submit the form.

2. Your attribute on the form says onsumbmit instead of onsubmit.

Move it inside the closing form tag and fix the onsubmit attributes:

<form method='post' onsubmit='return validateAndConfirm()'>

  <!-- ...inputs... -->

  <button type="submit" value="Signup">Sign Up</button>  
</form>

3 errors:

<form method='post' onsumbmit='validateAndConfirm'>

1 - It is onsubmit not onsumbmit
2 - The function should be called like validateAndConfirm()
3 - The input button should be inside the form

Thus:

<form method='post' onsubmit='validateAndConfirm()'>
<input type='submit' />
</form>

Because the form closing tag is not in the correct position and use strick equality operator(===)

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  function validateAndConfirm() {
let firstname = document.getElementById("firstname").value;
let lastname = document.getElementById("lastname").value;
let email = document.getElementById("email").value;
let confemail = document.getElementById("confemail").value;
let phone = document.getElementById("phone").value;
let address = document.getElementById("address").value;
let gender = document.getElementById("gender").value;
if (email === confemail) {
alert("Your details have been submitted as below and your card will be sent out within the next 5 business days.\n\nFirst name: " + firstname + "\nLast name: " + lastname + "\nEmail: " + email + "\nPhone: " + phone + "\nAddress: " + address + "\nGender: " + gender);
return true;
} else {
alert("Emails do not match, please amend and try again.");
return false;
}
}

<!-- language: lang-html -->

<div id="form" class="center text">
<form method="post" onsubmit="return validateAndConfirm()">
<label for="firstname">First Name:</label>
<input type="text" name="firstname" id="firstname" placeholder="Your first name..." autocomplete="given-name" required>
<br>
<label for="lastname">Last Name:</label>
<input type="text" id="lastname" name="lastname" placeholder="Your last name..." autocomplete="family-name" required>
<br>
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" placeholder="youremail@mail.co.nz..." autocomplete="off" required>
<br>
<label for="confemail">Confirm Email Address:</label>
<input type="email" id="confemail" name="confemail" placeholder="youremail@mail.co.nz..." autocomplete="off" required>
<br>
<label for="phone">Contact Number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{2-3}[0-9]{2-3}[0-9]{3-4}" placeholder="000 000 0000" autocomplete="tel-national" required>
<br>
<label for="address"> Address:</label>
<input type="text" id="address" name="address" placeholder="Your address..." autocomplete="address" required>
<br>
<label for="gender"> Gender:</label>
<select name="gender" id="gender" autocomplete="gender" required>
<option value="">Select...</option>
<option value="gen">Gender Diverse</option>
<option value="f">Female</option>
<option value="m">Male</option>
<option value="pnts">Prefer not to say</option>
</select>
<br>
<button type="submit">Signup</button>
</form>
</div>

<!-- end snippet -->

Two things

1. onsubmit should be provided as an attribute to the <form> tag instead of onclick in button

2. Submit button should be inside the <form>

PS: I have added an event.preventDefault() inorder to avoid unnecessary page refresh on submit button click.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function validateAndConfirm(event) {
event.preventDefault();
console.log('Hello world')
// Function
}

<!-- language: lang-html -->

<div id='form' class='center text' onsubmit="validateAndConfirm(event)">
<form method='post'>
<!-- All your controls -->
<button class='center' type="submit" value="Signup">Signup
</button>
</form>
</div>

<!-- end snippet -->