所以我试图建立一个网站来训练自己的代码，我有一个问题。
当按钮不在表单中时，是否可以对按钮进行验证？我使用HTML，CSS和bootstrap。

验证码如下：

<script>const submitButton=document.getElementById("submitButton");
const myForm=document.getElementById("myForm");
submitButton.addEventListener("click", function(event) {
  event.preventDefault(); // Prevent the button's default action
  // Check if the form is valid
  if (myForm.checkValidity()) {
    myForm.submit();
  }
  else {
    const formElements=myForm.elements;
    for (let i=0;
    i < formElements.length;
    i++) {
      if (!formElements[i].checkValidity()) {}
    }
  }
}

);
</script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="row">
  <div class="col-md-8 mb-4">
    <div class="card mb-4">
      <div class="card-header py-3">
        <h5 class="mb-0 text-font text-uppercase">Payment Details</h5>
      </div>
      <div class="card-body">

        <form id="myForm">

          <div class="row mb-4">
            <div class="col">
              <div class="form-outline">
                <label class="form-label" for="form11Example1">First name</label>
                <input type="text" id="form11Example1" class="form-control" style="text-transform: uppercase;" required/>

              </div>
            </div>
            <div class="col">
              <div class="form-outline">
                <label class="form-label" for="form11Example2">Last name</label>
                <input type="text" id="form11Example2" class="form-control" style="text-transform: uppercase;" required/>

              </div>
            </div>
          </div>

          <div class="row mb-4">
            <div class="col-md-9">
              <div class="form-outline">
                <label class="form-label" for="form11Example1">Card Number</label>
                <input type="number" id="form11Example3" class="form-control" required/>

              </div>
            </div>
            <div class="col-md-3">
              <div class="form-outline">
                <label class="form-label" for="form11Example2">CCV</label>
                <input type="number" id="form11Example4" class="form-control" required />

              </div>
            </div>
          </div>
          <div class="form-outline mb-4">
            <label class="form-label" for="form11Example7">EXPIRATION DATE</label>
            <input type="date" id="form11Example5" class="form-control" required/>

          </div>
          <div class="back-to-shop"><a href="#">&leftarrow;<span class="text-muted">Back to shop</span></a></div>

          <div class="form-check d-flex justify-content-center mb-2">

          </div>
        </form>

        <div class="row">
          <div class="col-md-4">
            <img src="images/Boston Fern 1.webp" class="rounded-3" style="width: 100px;" alt="Blue Jeans Jacket" />
          </div>
          <div class="col-md-6 ms-3">
            <span class="mb-0 text-price">€23.00</span>
            <p class="mb-0 text-descriptions">Boston Fern </p>
            <p class="text-descriptions mt-0">Qty:<span class="text-descriptions fw-bold">1</span>
            </p>
          </div>
        </div>



        <div class="card-footer">
          <ul class="list-group list-group-flush">
            <div class="row">
              <div class="col" style="padding-left:0;">Item(s) total</div>
              <div class="col text-right">&euro; 47.00</div>
            </div>
            <div class="row">
              <p>Tax:</p>
              <p class="col text-right">&euro;2.5</p>
            </div>
            <div class="row">
              <p>SHIPPING:</p>
              <p class="col text-right">&euro;5.00 </p>
            </div>
            <li class="list-group-item d-flex justify-content-between align-items-center px-0 fw-bold text-uppercase">
              Total to pay
              <span>&euro;54.5</span>
            </li>
          </ul>
        </div>
        <div class="text-center">
          <a id="button-payment" href="thanks-you.html">
            <button form="submitButton" id="button-pay" type="button" class="btn button-order col-md-10">PAY</button></a>

        </div>
      </div>
    </div>

  </div>

我试着问ChatGPT，它说我需要添加一个ID到表单和按钮上的表单，并添加一个JS脚本，这是不工作的。
我只是想知道是否有可能这样做。