message: Show validation message using html required attribute and wrapping in a form
diff: <body>
  <h4>Parameters</h4>
  + <form id="form">
  <table>
  <thead>
  <tr>
  </tr>
  </tfoot>
  </table>
  -
  <div class="btn-wrapper"></div>
  + </form>
  <script>
  const startValues = document.querySelectorAll("#params .params-name");
  tr.dispatchEvent(new Event('click'));
  });
  - document.querySelector("#confirm").addEventListener("click", (ev) => {
  - ev.stopPropagation();
  + document.getElementById('form').addEventListener('submit', (ev) => {
  + ev.preventDefault();
  + const confirmBtn = document.querySelector("#confirm");
  const tdsElements = document.querySelectorAll("#params .params-name");
  const tds = Array.from(tdsElements);
  const items = [];
  for (let index = 0; index < tds.length; index++) {
  const item = tds[index];
  - const startAt = Array.from(startValues).findIndex(
  - (td) => td === item
  - );
  + const startAt = Array.from(startValues).findIndex((td) => td === item);
  let label = item.textContent;
  let value = "";
  items.push(result);
  }
  - ev.target.disabled = true;
  + confirmBtn.disabled = true;
  const vscode = acquireVsCodeApi();
  vscode.postMessage({
  });
  });
  +
  document.body.addEventListener("click", (evt) => {
  if(evt.target.nodeName === "INPUT") return;
  function createParam() {
  const template = `
  - <td colspan="3" class="params-name"><input class="input-param-name"/></td>
  - <td colspan="1" class="params-value"><input class="input-param-value"/></td>
  + <td colspan="3" class="params-name"><input class="input-param-name" required/></td>
  + <td colspan="1" class="params-value"><input class="input-param-value" required/></td>
  `;
  const tr = document.createElement("tr");
  