Проверка формы не удалась

Я пытаюсь создать форму для POST для нового пользователя, но возникла проблема. Я использую проверку формы начальной загрузки (по умолчанию в браузере). Есть кнопка:

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

Эта кнопка также имеет функцию создания нового поста на основе данных из входа:

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

// post add button in html
addUsersBtn.addEventListener("click", postNewUser);

// Post a user
function postNewUser(e) {
  e.preventDefault();
  // write value from form inputs
  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;

  // create our user object from data recorded in variables from form inputs
  const newPost = {
    name: name,
    username: username,
    email: email,
    phone: phone,
    website: website,
    user_id: `id_${Math.random() * Math.random()}`,
  };

  // create a post
  createPost(newPost, (response) => {
    const card = newPostTemplate(response);
    container.insertAdjacentElement("afterbegin", card);
    form.reset();
    initPopovers();
  });
}

Но если я использую функцию проверки postNewUser, она не работает. Если я удалю класс «btn-addUser» из проверки кнопок, работа будет работать. Мой код из файла addUser.js:

// получаем нашу форму
const form = document.forms["addUser"];
// create a “create post” function
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.info(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));
  });
}
// template for the post in which it will be built
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;
}
// button to add post in html
addUsersBtn.addEventListener("click", postNewUser);
// function Post user
function postNewUser(e) {
  e.preventDefault();
  // write value from form inputs
  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;
  // create our user object from data recorded in variables from form inputs
  const newPost = {
    name: name,
    username: username,
    email: email,
    phone: phone,
    website: website,
    user_id: `id_${Math.random() * Math.random()}`,
  };
  // create a post
  createPost(newPost, (response) => {
    const card = newPostTemplate(response);
    container.insertAdjacentElement("afterbegin", card);
    form.reset();
    initPopovers();
  });
}

Я хочу задать несколько вопросов:

1. Могу ли я создать две кнопки: первую кнопку без класса «btn-addUser» и вторую кнопку с классом «btn-addUser»? Я хочу добавить состояние отключенной кнопки (начальная загрузка) и удалить их при отправке без того, чтобы класс btn-addUser получил положительный ответ от проверки. После нажатия кнопки «btn-addUser» эта кнопка будет отключена. Это правда? Я не знаю, как получить положительный ответ от проверки.
2. А может я фигню делаю и можно сделать гораздо проще?