Question

我知道有关此主题的问题很多，但没有一个类似于我的。因此，我有一个正在创建的新游戏网站，我想呼吁两个完全不同的功能。一个函数要求用户验证表单，另一个函数应在验证表单后立即显示欢迎消息。

我尝试了很多方法，但我用谷歌搜索，但都没有成功。而且，虽然我已经检查过代码，但代码没有运行，并且一切都很好，但是仍然没有运行。

function validateFormSubmission() {
  let firstName = document.getElementById('firstName').value;
  let lastName = document.getElementById('lastName').value;

  if (firstName == null || firstName == "") {
    alert("First Name shouldn't be empty");
    return false;
  } else if (lastName == null || lastName == "") {
    alert("Last Name shouldn't be empty");
    return false;
  } else {
    return true;
  }
}

function showWelcomeMessage() {
  let firstName = document.getElementById('firstName').value;
  let lastName = document.getElementById('lastName').value;
  document.getElementById('outputDiv').innerHTML = 'Hey Gamer' + firstName + lastName + ', Welcome ' + '!';
}

<body>
  <form onsubmit="return validateFormSubmission()">
    <table>
      <tr>
        <td>Your first name-</td>
        <td><input type="text" name="firstName"></td>
      </tr>

      <tr>
        <td>Your last name-</td>
        <td><input type="text" name="lastName"></td>
      </tr>
    </table>
  </form>
  <form onclick="showWelcomeMessage()"></form>
  <input type="submit" value="Let's play" />
  <hr>
  <div id="outputDiv">
  </div>
</body>

</html>

Answer 1

您在这里可能不需要两种形式，第二种形式什么也不做。表单上的onclick处理程序也很奇怪

您实际上可以在第一个函数validateFormSubmission中创建一个Promise，并根据其成功或失败调用第二个函数

function validateFormSubmission() {
  // returning a promise, so depending on returned value, next step can be processed  
  return new Promise(function(resolve, reject) {
    let firstName = document.getElementById('firstName').value;
    let lastName = document.getElementById('lastName').value;

    if (firstName == null || firstName == "") {
      alert("First Name shouldn't be empty");
      return false;  // it can also be reject(false)
    } else if (lastName == null || lastName == "") {
      alert("Last Name shouldn't be empty");
      return false;
    } else {
      return resolve(true) // validation is successful so return true
    }
  })
}

function showWelcomeMessage() {
  let firstName = document.getElementById('firstName').value;
  let lastName = document.getElementById('lastName').value;
  document.getElementById('outputDiv').innerHTML = 'Hey Gamer' + firstName + lastName + ', Welcome ' + '!';
}

document.getElementById('myForm').addEventListener('submit', function(e) {
  //since button type is submit so prevent the default behavior 
  e.preventDefault();
  validateFormSubmission().then(function(x) {
    //x will be true is validation is successful
    if (x) {
      showWelcomeMessage()
    }
  })
})

<form id="myForm">
  <table>
    <tr>
      <td>Your first name-</td>
      <td><input type="text" id="firstName"></td>
    </tr>

    <tr>
      <td>Your last name-</td>
      <td><input type="text" id="lastName"></td>
    </tr>
  </table>
  <button type="submit" value="Let's play">Lets Play</button>
</form>

<hr>
<div id="outputDiv">
</div>

Answer 2

您只需要在第一个函数内调用第二个函数，就可以使您的事情正常工作。

    function validateFormSubmission(){
        let firstName = document.getElementById('firstName').value;
        let lastName = document.getElementById('lastName').value;

        if (firstName==null || firstName==""){
            alert("First Name shouldn't be empty");
        return false;
        }

        else if (lastName==null || lastName==""){
            alert("Last Name shouldn't be empty");
        return false;
        }
        else{  
        return showWelcomeMessage();
        }
        }
        function showWelcomeMessage(){
            let firstName = document.getElementById('firstName').value;
            let lastName = document.getElementById('lastName').value;
            document.getElementById('outputDiv').innerHTML = 'Hey Gamer' + firstName + lastName + ', Welcome ' + '!';
            return true;
        }

Answer 3

如果showWelcomeMessage()返回true，只需调用validateFormSubmission()函数：

function validateAndShowMessage() {
  if (validateFormSubmission()) {
    showWelcomeMessage();
  }
}

function validateFormSubmission() {
  let firstName = document.getElementById('firstName').value;
  let lastName = document.getElementById('lastName').value;

  if (firstName == null || firstName == "") {
    alert("First Name shouldn't be empty");
    return false;
  } else if (lastName == null || lastName == "") {
    alert("Last Name shouldn't be empty");
    return false;
  } else {
    return true;
  }
}

function showWelcomeMessage() {
  let firstName = document.getElementById('firstName').value;
  let lastName = document.getElementById('lastName').value;
  document.getElementById('outputDiv').innerHTML = 'Hey Gamer ' + firstName + " " + lastName + ', Welcome ' + '!';
}

<body>
  <form onsubmit="validateAndShowMessage(); return false;">
    <table>
      <tr>
        <td>Your first name-</td>
        <td><input type="text" id="firstName"></td>
      </tr>

      <tr>
        <td>Your last name-</td>
        <td><input type="text" id="lastName"></td>
      </tr>
    </table>

    <input type="submit" value="Let's play" />

  </form>
  <div id="outputDiv">
  </div>
</body>

</html>

使用一个提交按钮/提交按钮调用两个功能

3 个答案: