Form validation bootstrap not working, even if empty button leads to the other webpage

I’ve created a form validation system for a sign up page for a website, however the button once clicked will lead to the profile page no matter what.
I want it to only lead to the profile page if the form is valid and provides valid feedback without any invalid feedback

Code below

        <div class="col-16 bg-dark">
            <div class="d-flex justify-content-center">
                <h1 class="text-white">Sign up below</h1>
             </div>
        </div>
        <form class="row g-3 needs-validation" novalidate>
            <div class="col-md-4">
              <label for="validationCustomFName" class="form-label">First name</label>
              <input type="text" class="form-control" id="validationCustomFName" value="" required>
              <div class="valid-feedback">
                Looks good!
              </div>
            </div>
            <div class="col-md-4">
              <label for="validationCustomLName" class="form-label">Last name</label>
              <input type="text" class="form-control" id="validationCustomLName" value="" required>
              <div class="valid-feedback">
                Looks good!
              </div>
            </div>
            <div class="col-md-4">
              <label for="validationCustomUsername" class="form-label">Username</label>
              <div class="input-group has-validation">
                <span class="input-group-text" id="inputGroupPrepend">@</span>
                <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
                <div class="invalid-feedback">
                  Please choose a username.
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <label for="validationCustomEmail" class="form-label">Email</label>
              <input type="email" class="form-control" id="validationCustomEmail" required>
              <div class="invalid-feedback">
                Please provide a valid email.
              </div>
            </div>
            </div>
            <div class="col-md-6">
              <label for="validationCustom05" class="form-label">Phone Number</label>
              <input type="number" class="form-control" id="validationCustomNumber" required>
              <div class="invalid-feedback">
                Please provide a valid number.
              </div>
            </div>
            <div class="col-12">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
                <label class="form-check-label" for="invalidCheck">
                  Agree to terms and conditions
                </label>
                <div class="invalid-feedback">
                  You must agree before submitting.
                </div>
              </div>
            </div>
            <div class="col-12">
              <div class="d-flex justify-content-center">
              <a class="btn btn-primary" href="profilepage.html" role="button">Sign up!</a>
              </div>
            </div>
          </form>

No idea what I should be doing, this uses no JS and CSS so far.

>Solution :

This code alone is not sufficient to achieve what you’re aiming for. You’ll need to implement and adjust a few things here:

1. Change the button to a submit button: This way, the form’s
   built-in validation will check all fields before submission.

2. Add JavaScript validation: Here, you can run validations and
   handle redirection according to your logic.

There are many resources available on JavaScript validation. Good luck!"