Question

我希望在允许用户离开页面之前，要求用户填写至少一个输入（不是特定的输入，一般只有一个）。我认为底部的JS代码可以解决这个问题，但它无法正常工作......

HTML

<body>
  <div class="content">
    <h1>Customer Search </h1><br>
    <h2>Enter one or more of the following: </h2> 
    <hr>
  </div>
    <div class="content2">
      <table style="width:100%">
        <form id = "searchForm">
          <tr><td> First Name: </td><td><input type="text" name="FirstName"></td> </tr>
          <tr><td> Last Name: </td><td><input type="text" name="LastName"> </td></tr> 
          <tr><td> Member Number: </td><td><input type="text" name="MemberNum"> </td></tr>
          <tr><td> Telephone: </td><td><input type="text" name="PhoneNum"> </td></tr>
          <tr><td> Email: </td><td><input type="text" name="Email"> </td></tr>
        </form>
      </table>
    </div>
    <div class= "content">
      <div class="link">
        <form id ="frm1">
          <button class="button"><a href="landing_page.html">Landing Page</a></button>
          <button class="button">Search</button>
          <button class="button">Reset</button> <br><br><br>
        </form>

的JavaScript

function submitform() {
    if ( (searchForm.FirstName.value != null || searchForm.LastName.value != null ||
         searchForm.MemberNum.value != null || searchForm.PhoneNum.value != null ||
         searchForm.Email.value != null) && !(searchForm.FirstName.value ==  null &&
         searchForm.LastName.value ==  null && searchForm.MemberNum.value ==  null &&
         searchForm.PhoneNum.value ==  null && searchForm.Email.value ==  null)) {
         alert("Form is good");
         return (true);
     }
     alert("You must enter at least one field!");
     return (false);
}

Answer 1

自动迭代表单中的所有输入会更容易，并检查它们中是否有任何值：

function submitform(e) {
  e.preventDefault();
  const searchForm = document.querySelector('#searchForm');
  const isValid = [...searchForm.querySelectorAll('input')]
    .some(input => input.value !== '');
  if (isValid) {
    console.log('Form is good')
    return true;
  } else {
    console.log('You must enter at least one field!');
    return false;
  }
}
document.querySelector('#frm1').children[1].addEventListener('click', submitform);

<div class="content">
  <h1>Customer Search </h1> <br>
  <h2>Enter one or more of the following: </h2>
  <hr>
</div>
<div class="content2">
    <form id="searchForm">
  <table style="width:100%">
      <tr>
        <td> First Name: </td>
        <td><input type="text" name="FirstName"></td>
      </tr>
      <tr>
        <td> Last Name: </td>
        <td><input type="text" name="LastName"> </td>
      </tr>
      <tr>
        <td> Member Number: </td>
        <td><input type="text" name="MemberNum"> </td>
      </tr>
      <tr>
        <td> Telephone: </td>
        <td><input type="text" name="PhoneNum"> </td>
      </tr>
      <tr>
        <td> Email: </td>
        <td><input type="text" name="Email"> </td>
      </tr>

  </table>
    </form>
</div>
<div class="content">
  <div class="link">
    <form id="frm1">
      <button class="button"><a href="landing_page.html">Landing Page</a></button>
      <button class="button">Search</button>
      <button class="button">Reset</button> <br><br><br>
    </form>

除非输入包含文本，否则禁止页面导航

1 个答案: