点击Button或Input时弹窗FORM意外关闭问题排查

点击带有reloadButton类的验证码刷新按钮，或是带有submitID的提交输入框时，弹窗表单会意外关闭，不符合预期。以下是相关代码及问题原因分析：

相关HTML代码 #

<form name="contactform" id="contactform" class="contact-form">
  <div class="contactform-container">
    <a href="" class="closeButton"></a>
    <div class="common">
      <label for="name">Nome</label>
      <input type="text" id="name" name="name" />
    </div>
    <div class="common">
      <label for="name">Cognome</label>
      <input type="text" id="familyName" name="familyName" />
    </div>
    <div class="common">
      <label for="email">e-mail</label>
      <input type="text" id="email" name="email" />
    </div>
    <div class="message">
      <label for="message">Annotazioni</label>
      <textarea name="message" id="message" class="message"></textarea>
    </div>
    <div class="passRow">
      <fieldset class="validatePass">
        <div class="formGroup">
          <label class="formLabel"for="password">Password
            <span class="passErr"></span>
          </label>
          <div class="passWrapper">
            <input type="password"
            id="password"
            class="form-control input-md"
            name="password"
            placeholder="Enter your password">
            <span class="showPass">
              <i class="fas fa-eye-slash"></i>
            </span>
          </div>
          <p class="progress">Livello di sicurezza</p>
          <div id="progressBar">
            <div></div>
          </div>
          <ul id="progressList">
            <li>Un carattere minuscolo e uno maiuscolo</li>
            <li>Un numero</li>
            <li>Un carattere speciale tra "!,%,&,@,#,$,^,*,?,_,-"</li>
            <li>Lunghezza minima: 8 caratteri</li>
          </ul>
        </div>
      </fieldset>
    </div>
    <div class="securityCaptcha">
      <p>Inserire il codice nei riquadri sottostanti</p>
      <div class="first row">
        <div class="refCheck">
          <canvas class="valiCaptcha"></canvas>
        </div>
        <div class="refCheck">
          <canvas class="valiCaptcha"></canvas>
        </div>
        <div class="refCheck">
          <canvas class="valiCaptcha"></canvas>
        </div>
        <div class="refCheck last">
          <canvas class="valiCaptcha"></canvas>
          <button class="reloadButton">
            <i class="fas fa-redo"></i>
          </button>
        </div>
      </div>
      <div class="second row">
        <div class="refCheck">
          <input type="text" name="" maxlength="1">
        </div>
        <div class="refCheck">
          <input type="text" name="" maxlength="1">
        </div>
        <div class="refCheck">
          <input type="text" name="" maxlength="1">
        </div>
        <div class="refCheck">
          <input type="text" name="" maxlength="1">
        </div>
      </div>
    </div>
    <div class="contactArea">
      <p>Compilare tutti i dati per la prenotazione.</p>
      <input type="submit" name="submit" id="submit" value="send">
    </div>
  </div>
</form>

相关JS代码 #

let formEls = formPopup.querySelectorAll('.common, .message, .note');
let charCode = [];
const refreshButton = document.querySelectorAll('.reloadButton')[0];
const passInput = document.getElementById('password');

window.onload = function () {
  document.querySelector('#reserveBtn').addEventListener('click', function () {
    formPopup.classList.add('active');
  });

  getCode();
  formPopup.querySelector('.closeButton').addEventListener('click', function () {
    cleanForm();
    formPopup.classList.remove('active');
  });

  formPopup.addEventListener('click', function (ev) {
      if (ev.target.id == 'contactform-bg') {
        cleanForm();
        formPopup.classList.remove('active');
      }
    });
  refreshButton.addEventListener('click', function (ev) {
    charCode = [];
    getCode();
  });

  passInput.addEventListener('keyup', function () {
    passVal = passInput.value;
    checkPass(passVal);
  });

};

let cleanForm = function () {
  formEls.forEach((item, i) => {
    item.classList.remove('typing');
  });
  document.contactform.name.value = '';
  document.contactform.familyName.value = '';
  document.contactform.email.value = '';
  document.contactform.message.value = '';
  passInput.value = '';
};

function getCode() {
  let sChars = 'A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,0,1,2,3,4,5,6,7,8,9,!,@,#,$,%,^,&,*,(,)';
  let arrayChars = sChars.split(',');
  for (var i = 0; i <= 3; i++) {
    RefIndex = Math.floor(Math.random() * arrayChars.length);
    let char = arrayChars[RefIndex];
    charCode[i] = char.toLowerCase;
    createImgCaptcha(char, i);
  }
}

问题原因 #

1. submit按钮的默认行为：<input type="submit">的核心作用是触发表单提交，浏览器会默认刷新页面，导致依赖页面状态显示的弹窗关闭。
2. reloadButton按钮的默认类型：表单内的<button>元素默认type为submit，点击时同样会触发表单提交，引发页面刷新，最终导致弹窗关闭。

解决方案 #

• 修正reloadButton的类型：给按钮添加type="button"属性，明确它是普通按钮，不会触发表单提交：

  <button class="reloadButton" type="button">
    <i class="fas fa-redo"></i>
  </button>
  

• 阻止submit的默认提交行为：如果需要用AJAX提交表单而非刷新页面，给submit按钮添加事件监听阻止默认行为：

  document.getElementById('submit').addEventListener('click', function(ev) {
    ev.preventDefault(); // 阻止页面刷新
    // 这里添加表单验证、AJAX提交等逻辑
  });
  

内容的提问来源于stack exchange，提问作者BennyB