How can I make it so my "Clear" button resets the form and error messages? – Javascript

So, I’m currently studying IT and web-development and design are part of it and I have run into a snag of sorts around the "Clear" button which is set to the class of "Reset" as I’m not sure if I’ll need to add a JavaScript function to the form and how I would do that.
I have created a event-listener function for the "Submit" button, would the JavaScript that I would need to implement for the "Clear" button to evoke the reset feature and clear the form back to its original state be much the same? Placeholder information needs to stay in the fields it’s purely the reset button that needs to be working and clearing the form and error messages that arise.

Here is the HTML…

<main>
          <h1>Registration Form</h1>
    <p>Please complete the following form to register for an account on our website.</p>
    
        <div class="container">
        <form id="form" action="/">
     
        <div class="input-control">
                <label for="username">Username</label>
                <input id="username" name="username" type="text" placeholder="Username">
                <div class="error"></div>
            </div>
            <div class="input-control">
                <label for="email">Email</label>
                <input id="email" name="email" type="text" placeholder="Email">
                <div class="error"></div>
            </div>
            <div class="input-control">
                <label for="password">Password</label>
                <input id="password"name="password" type="password" placeholder="Password">
                <div class="error"></div>
            </div>
            <div class="input-control">
                <label for="password2">Confirm Password</label>
                <input id="password2"name="password2" type="password" placeholder="Confirm Password">
                <div class="error"></div>
            </div>
            <div class="input-control">
            <label for="firstname">First Name</label>
            <input type="text" id="firstname" placeholder="Joe">
            <div class="error"></div>
            </div>
            <div class="input-control">
            <label for="surname">Surname</label>
            <input type="text" id="surname" placeholder="Smith">
            <div class="error"></div>
        </div>
            <div class="input-control">
            <label for="gender">Gender</label>
            <select name="gender">
            <option value="Please select">Please Select</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
            <option value="Them/They">Them/They</option>
            <option value="Rather Not Say">Rather Not Say</option>
            </select>
            <div class="error"></div>
        </div>
            <div class="input-control">
            <label for="dateofbirth">Date of Birth</label>
            <input type="date" name="datepicker" min="1900-01-01" max="2099-01-01" id="dateOfBirth" placeholder="Enter password again">
            <div class="error"></div>
        </div>
        <div class="input-control">
            <label for="address">Address</label>
            <input type="text" id="address" placeholder="1 Main Street">
            <div class="error"></div>
        </div>
        <div class="input-control">
            <label for="suburb">Suburb</label>
            <input type="text" id="suburb" placeholder="Sydney">
            <div class="error"></div>
        </div>
        <div class="input-control">
            <label for="postcode">Postcode</label>
            <input type="text" id="postcode" name="zip" pattern="[0-9]*" placeholder="2000">
            <div class="error"></div>
        </div>
        <div class="input-control">
            <label for="state">State</label>
            <select name="state">
            <option value="ACT">ACT</option>
            <option value="NSW" selected>NSW</option>
            <option value="NT">NT</option>
            <option value="QLD">QLD</option>
            <option value="SA">SA</option>
            <option value="TAS">TAS</option>
            <option value="VIC">VIC</option>
            <option value="WA">WA</option>
            </select>
            <div class="error"></div>
        </div>
        <div class="input-control">
            <label for="phonenumber">Phone Number</label>
            <input type="tel" id="phonenumber" placeholder="Enter Phone Number">
            <div class="error"></div>
            <div>
            <button type="submit" class="submit" name="submit">Register</button>
            <button value="Reset" class="reset" >Clear</button>
            </div>
            </div>
        </form>
    
        
    <p>Already a member? <a href="LogIn.html">Log In</a>
         </p>
        </main>

Here is the JavaScript…

const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');
const firstname = document.getElementById('firstname');
const surname = document.getElementById('surname');
const address = document.getElementById('address');
const suburb = document.getElementById('suburb');
const postcode = document.getElementById('postcode');
const phonenumber = document.getElementById('phonenumber');

form.addEventListener('submit', e => {
    e.preventDefault();

    validateInputs();
});

const setError = (element, message) => {
    const inputControl = element.parentElement;
    const errorDisplay = inputControl.querySelector('.error');

    errorDisplay.innerText = message;
    inputControl.classList.add('error');
    inputControl.classList.remove('success')
}

const setSuccess = element => {
    const inputControl = element.parentElement;
    const errorDisplay = inputControl.querySelector('.error');

    errorDisplay.innerText = '';
    inputControl.classList.add('success');
    inputControl.classList.remove('error');
};

const isValidEmail = email => {
    const re = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
}

const isValidUsername = username => {
    const re = /^[A-Za-z0-9 ]+$/;
    return re.test(String(username).length <6)
}

const isValidFirstname = firstname => {
    const re = /^[A-Za-z0-9 ]+$/;
    return re.test(String(firstname).length <2)
}

const isValidSurname = surname => {
    const re = /^[A-Za-z0-9 ]+$/;
    return re.test(String(surname).length <2)
}

const validateInputs = () => {
const usernameValue = username.value.trim();
const emailValue = email.value.trim();
const passwordValue = password.value.trim();
const password2Value = password2.value.trim();
const firstnameValue = firstname.value.trim()
const surnameValue = surname.value.trim()
const addressValue = address.value.trim()
const suburbValue = suburb.value.trim()
const postcodeValue = postcode.value.trim()
const phonenumberValue = phonenumber.value.trim()
    
    if(usernameValue === '') {
        setError(username, 'Username is required');
    } else if (!isValidUsername(usernameValue)) {
            setError(username, 'Username can not contain special characters or be less than 8 characters long')
    } else {
        setSuccess(username);
    }
    
    if(emailValue === '') {
        setError(email, 'Email is required');
    } else if (!isValidEmail(emailValue)) {
        setError(email, 'Provide a valid email address');
    } else {
        setSuccess(email);
    }

    if(passwordValue === '') {
        setError(password, 'Password is required');
    } else if (passwordValue.length < 8 ) {
        setError(password, 'Password must be at least 8 character.')
    } else {
        setSuccess(password);
    }

    if(password2Value === '') {
        setError(password2, 'Please confirm your password');
    } else if (password2Value !== passwordValue) {
        setError(password2, "Passwords doesn't match");
    } else {
        setSuccess(password2);
    }
    
    if(firstnameValue === '') {
        setError(firstname, 'Please enter your First Name');
    } else if (!isValidFirstname(firstnameValue)) {
        setError(firstname, 'Username can not contain special characters or be less than 2 characters long')
} else {
        setSuccess(firstname);
    }
    
    if(surnameValue === '') {
        setError(surname, 'Please enter your Surname');
    } else if (!isValidSurname(surnameValue)) {
        setError(surname, 'Username can not contain special characters or be less than 2 characters long')
} else {
        setSuccess(surname);
    }
    
    if(addressValue === '') {
        setError(address, 'Please enter your Address');
    } else if(addressValue.length < 20) {
        setError(address, 'Address must be longer then 20 charcters');
    } else {
        setSuccess(address);
    }
    
    if(suburbValue === '') {
        setError(suburb, 'Please enter your Suburb');
    } else if(suburbValue.length < 5) {
        setError(address, 'Suburb must be longer then 5 charcters');
    } else {
        setSuccess(suburb);
    }
    
    if(postcodeValue === '') {
        setError(postcode, 'Please enter your Postcode');
    } else if(isNaN(postcodeValue.length > 4 )) {
        setError(postcode, 'Postcode must be 4 numbers')
    } else {
        setSuccess(postcode);
    }
    
    if(phonenumberValue === '') {
        setError(phonenumber, 'Please enter your Phone Number');
    } else if(isNaN(phonenumberValue.length < 10)) {
        setError(address, 'Phone Number must be less than 10 numbers');
    } else {
        setSuccess(phonenumber);
    }
};

I wanted to make sure I share the required codes… I can add the CSS if you want but thought this was sufficient as this is where the issue lies for me.

I have googled, read multiple different things here on Stack and other sites, I’m not familiar with jQuery as I’m still studying and haven’t ventured over there yet. I have experienced complete loss of data once when I implemented a function for the "Clear" button in JavaScript, I felt that this caused a conflict with the "Submit" buttons code, not sure though.
Otherwise, the current state is the only state that allows the button to display as intended and the button sadly is not responsive at all.