javascript - Javascript reportValidity 未按预期工作

Question

我有一个表格，有两个字段（telno和email），我需要至少填写一个，所以要么是电子邮件，要么是电话号码，或者两者兼而有之。所有其他字段都是必需的，并使用内置的表单验证，我想对这两个字段使用类似的东西，所以在提交表单之前它会运行preValidateForm。这第一次工作并显示有效性消息，但随后每次提交表单时，该函数都不会被调用，并且无论字段的内容如何，​​都会出现相同的有效性消息。如何使验证按预期工作，仅在提交表单且未填写任何字段时才显示消息？

function isEmpty(val) {
  if (val.trim().length == 0) {
    return true;
  } else {
    return false;
  }
}

function preValidateForm(event) {
  var form = document.getElementById("contact-form");
  console.log(isEmpty(form["telno"].value) && isEmpty(form["email"].value))
  if (isEmpty(form["telno"].value) && isEmpty(form["email"].value)) { //If both fields are empty
    form["telno"].setCustomValidity("Please provide either a phone number, email or both");
    form.reportValidity(); //Show validation message
    event.preventDefault(); //Don't submit form
    return false;
  } else {
    form["telno"].setCustomValidity("");
    return true;
  }
}

<form id="contact-form" action="/" method="POST" onsubmit="return preValidateForm(event)">
  <label for="first">First name<span class="required">*</span></label>
  <input id="first" name="first" required="" type="text" value="">

  <label for="last">Last name<span class="required">*</span></label>
  <input id="last" name="last" required="" type="text" value="">

  <p>Please provide either a phone number, email or both:<span class="required">*</span></p>
  <label for="telno">Phone number</label>
  <input id="telno" name="telno" type="tel" value="">

  <label for="email">Email</label>
  <input id="email" name="email" type="email" value="">

  <label for="message">Your message:<span class="required">*</span></label>
  <textarea id="message" name="message" required=""></textarea>

  <input id="submit" name="submit" type="submit" value="Submit">
</form>

标签： javascripthtmlformsvalidation