表单验证失败

我尝试创建表单来 POST 新用户，但遇到了问题。我使用 bootstrap 表单验证（浏览器默认设置）。有一个按钮：

<button class="btn btn-primary btn-addUser" type="submit">Add User</button>

该按钮还具有根据输入数据创建新帖子的功能：

const addUsersBtn = document.querySelector(".btn-addUser");

// кнопка добавления поста в html
addUsersBtn.addEventListener("click", postNewUser);

// Запостить юзера
function postNewUser(e) {
  e.preventDefault();
  // записать value из инпутов формы
  const name = form.elements.namedItem("name").value;
  const username = form.elements.namedItem("username").value;
  const email = form.elements.namedItem("email").value;
  const phone = form.elements.namedItem("phone").value;
  const website = form.elements.namedItem("website").value;

  // создать объект нашего юзера из данных записанных в переменные из инпутов формы
  const newPost = {
    name: name,
    username: username,
    email: email,
    phone: phone,
    website: website,
    user_id: `id_${Math.random() * Math.random()}`,
  };

  // создать пост
  createPost(newPost, (response) => {
    const card = newPostTemplate(response);
    container.insertAdjacentElement("afterbegin", card);
    form.reset();
    initPopovers();
  });
}

但如果我使用函数 postNewUser 验证就不起作用。如果我从按钮验证中删除“btn-addUser”类。我的 addUser.js 文件中的代码：

// получаем нашу форму
const form = document.forms["addUser"];
// создаём функцию "создать пост"
function createPost(body, callback) {
  return new Promise((resolve, reject) => {
    const request = new XMLHttpRequest();
    request.open("POST", "https://jsonplaceholder.typicode.com/posts");
    request.addEventListener("load", () => {
      const response = JSON.parse(request.responseText);
      //   console.log(response);
      if (request.status >= 400) {
        reject(request.response);
      } else {
        resolve(request.response);
      }
      callback(response);
    });
    request.setRequestHeader("Content-type", "application/json; charset=UTF-8");
    request.send(JSON.stringify(body));
  });
}
// шаблон для поста в котором он будет строится
function newPostTemplate(post) {
  const card = document.createElement("div");
  card.classList.add("card");

  const cardBody = document.createElement("div");
  cardBody.classList.add("card-body");

  const userBtn = document.createElement("button");
  userBtn.setAttribute("type", "button");
  userBtn.classList.add("btn", "btn-info", "btn-lg");
  userBtn.setAttribute("data-bs-toggle", "popover");
  userBtn.setAttribute("data-bs-html", "true");
  userBtn.setAttribute(
    "data-bs-title",
    "Additional information about the user: "
  );
  userBtn.setAttribute(
    "data-bs-content",
    `Username: ${post.username}<br/>Email: ${post.email}<br/>Phone: ${post.phone}<br/> Website: ${post.website}`
  );
  const title = document.createElement("h5");
  title.classList.add("card-title");
  title.textContent = post.name;

  userBtn.appendChild(title);
  cardBody.appendChild(userBtn);
  card.appendChild(cardBody);
  return card;
}
// кнопка добавления поста в html
addUsersBtn.addEventListener("click", postNewUser);
// Запостить юзера
function postNewUser(e) {
  e.preventDefault();
  // записать value из инпутов формы
  const name = form.elements.namedItem("name").value;
  const username = form.elements.namedItem("username").value;
  const email = form.elements.namedItem("email").value;
  const phone = form.elements.namedItem("phone").value;
  const website = form.elements.namedItem("website").value;
  // создать объект нашего юзера из данных записанных в переменные из инпутов формы
  const newPost = {
    name: name,
    username: username,
    email: email,
    phone: phone,
    website: website,
    user_id: `id_${Math.random() * Math.random()}`,
  };
  // создать пост
  createPost(newPost, (response) => {
    const card = newPostTemplate(response);
    container.insertAdjacentElement("afterbegin", card);
    form.reset();
    initPopovers();
  });
}

我想要问几个问题：

1. 我可以创建两个按钮吗：第一个按钮没有“btn-addUser”类，第二个按钮有“btn-addUser”类？我想添加一个按钮禁用状态（引导程序），并在没有“btn-addUser”类的提交收到验证的肯定响应时将其删除。单击带有“btn-addUser”的按钮后，此按钮将被禁用。真的吗？我不知道如何从验证中获得肯定的响应。
2. 或者也许我正在做垃圾，它可以做得更简单？