在表單中遇到Href問題

我正在嘗試創建一個表單，如果欄位為空，或者如果欄位不為空，則會發出警報，那么它將把用戶帶到一個新頁面（這個頁面確實存在）我嘗試用'替換'按鈕'輸入'，但仍然沒有希望

     <div id='signupbox'>
       <div class="formbox">
        <h1>My first contact form</h1>
        <p style="color:red;">Anything With a * is required</p>
        <br>
        <form name="app-form" onsubmit="return validateForm()" method="post">      
          <input name="Fname" id='Fname' type="text" class="feedback-input" placeholder="Fname" />   
          <input name="Email" id='Email' type="text" class="feedback-input" placeholder="Email" />
          <select name="languages" id="lang" class="feedback-input">
            <option value="javascript">Select a language</option>
            <option value="javascript">JavaScript</option>
            <option value="php">PHP</option>
            <option value="java">Java</option>
            <option value="golang">Golang</option>
            <option value="python">Python</option>
            <option value="c#">C#</option>
            <option value="C  ">C  </option>
            <option value="erlang">Erlang</option>
          </select>
          <textarea name="Text" id='Text' class="feedback-input" placeholder="Comment"></textarea>
          <button type='submit' onclick="return validateFormData(); Link();" >SUBMIT</button>

        </form>
  
       </div>
     </div> 
    
</body>
<script>
  function validateForm() {
    let x = document.forms["app-form"]["Fname"].value;
    let y = document.forms["app-form"]["Email"].value;
    if ((x == "") || (y=='')) {
      alert("Required Fields Must be Filled Out.");
      return false;}}

  function Link(){
    document.location.href = "SuccessPage.html";
  }


</script>

uj5u.com熱心網友回復：

如果oninvalid情況是通過顯示警報來警告用戶，屬性也會發出警報：

  <input 
   name="Fname" 
   id='Fname' 
   type="text" 
   class="feedback-input" 
   oninvalid="alert('Required Fields Must be Filled Out.!');" placeholder="Fname" />   
          
  <input 
   name="Email" 
   id='Email' 
   type="text" 
   class="feedback-input" 
   oninvalid="alert('Required Fields Must be Filled Out.!');" placeholder="Email" />

檢查 HTML oninvalid 事件屬性以獲取詳細資訊。

uj5u.com熱心網友回復：

您的 onClick 方法是錯誤的。應該是這樣的：

<button type='submit' onclick="validateFormData()" >SUBMIT</button>

在您的 validateFormData 方法中，您應該檢查以確保表單有資料，如果有，則呼叫您的 Link() 方法。如果沒有，則顯示警報。

uj5u.com熱心網友回復：

首先，如果您想要一個好的表單頁面，您必須防止默認行為類似于頁面更新，因此您可以擁有如此好的表單驗證程序。我編輯了您的代碼，請使用它。

  <div id='signupbox'>
       <div class="formbox">
        <h1>My first contact form</h1>
        <p style="color:red;">Anything With a * is required</p>
        <br>
        <form name="app-form" method="post">      
          <input name="Fname" id='Fname' type="text" class="feedback-input" placeholder="Fname" />   
          <input name="Email" id='Email' type="text" class="feedback-input" placeholder="Email" />
          <select name="languages" id="lang" class="feedback-input">
            <option value="javascript">Select a language</option>
            <option value="javascript">JavaScript</option>
            <option value="php">PHP</option>
            <option value="java">Java</option>
            <option value="golang">Golang</option>
            <option value="python">Python</option>
            <option value="c#">C#</option>
            <option value="C  ">C  </option>
            <option value="erlang">Erlang</option>
          </select>
          <textarea name="Text" id='Text' class="feedback-input" placeholder="Comment"></textarea>
          <button type='submit' id="button" >SUBMIT</button>

        </form>
  
       </div>
     </div> 
    
</body>
<script>
  document.getElementById("button").addEventListener("submit", function validateForm(e) {
    e.preventDefault();
    let x = document.getElementById("Fname").value;
    let y = document.getElementById("Email").value;
    if (!x || !y) {
      alert("Please fill required areas.")
      return
    } else {
      window.location.href="/SuccessPage.html"
    }}
     )
</script>

標籤：javascript html

上一篇：使用BeautifulSoup決議值

下一篇：如何根據相同長度的字串模式屏蔽字串