表單：在提交表單之前使用 jQuery 驗證特殊情況

Question

我需要在不使用任何特殊插件的情況下驗證表單，只需 jQuery。

我有一個禁用的提交按鈕，我像這樣啟用它：

const getFields = $(
  'form#inquiry-component-form input, form#inquiry-component-form textarea, form#inquiry-component-form select'
).filter('[required]:visible');

getFields.on('input', () => {

  let empty = false;

  getFields.each(function() {
    if (!empty && $(this).val() == '') {
      empty = true;
    }
  });

  $('#submit-inquiry-form').prop('disabled', empty);
});

我遇到的問題是表單包含電話號碼和 email 地址輸入，因此當這兩個輸入不再為空時，提交按鈕將變為啟用狀態。 我需要它們首先匹配模式，然后啟用提交按鈕。

這些是 tel 和 email 輸入：

<input id="inquiry-phone" class="form-control" type="tel" name="phone" placeholder="Phone Number (10 digits)" pattern="[1-9]{1}[0-9]{9}" required>
<input id="inquiry-email" class="form-control" type="email" name="email" placeholder="Email address" required>

有任何想法嗎？

Answer 1

你可以嘗試這樣的事情。 我添加了一個提交按鈕，然后我們正在檢查是否啟用該按鈕或不使用正則表達式。

<form id="submit-inquiry-form">
  <input id="inquiry-phone" class="form-control" type="tel" name="phone" placeholder="Phone Number (10 digits)" pattern="[1-9]{1}[0-9]{9}" required>
  <input id="inquiry-email" class="form-control" type="email" name="email" placeholder="Email address" required>
  <button id="btn" disabled>Submit</button>
</form>

const getFields = $(
  'input'
).filter('[required]:visible');

getFields.on('input', () => {
  let empty = false;
  let patternMatch = true;
  
  getFields.each(function() {
    console.log("check", $(this).val())
    if ($(this).val().trim() == '') {
      empty = true;
    }
    
    // check for regex
    if ($(this).attr("pattern")) {
      const regex = new RegExp($(this).attr("pattern"));
      patternMatch = regex.test($(this).val())
    }
  });
  
  if (empty || !patternMatch) {
    console.log("empty or bad match")
    $('#btn').attr('disabled', true);
  } else {
    $('#btn').removeAttr('disabled');
  }
});