我正在嘗試學習表單驗證，但我似乎無法弄清楚這里發生了什么。我正在關注 w3schools 教程，并且驗證表單函式在回傳時給出錯誤，而在他們的示例中沒有這樣做。我嘗試將示例復制并粘貼到我的專案中，只是更改屬性名稱，但它仍然給出錯誤。親愛的，我已經把表單和 javascript 的所有代碼以及 w3schools artice 的鏈接都放在了上面。

        function validateForm(){
            var x = document.forms["contact"]["yourName"].value;

            if(x == "") {
                alert('Please Enter Your Name')
                return false;
            }
        }

 <div class="contact-form">

        <form name="contact" onsubmit="return validateForm()">

            <h1>Order Now</h1>



            <hr>

            <br>

            <br>

            <div class="form-group">
                <label  for="cakeName">Cake name:</label>
                <select required name="cakes" id="cakes">
                    <option value="placeholder">--- Select cake ---</option>
                    <option value="cakeOne">Coconut Bundt Cake</option>
                    <option value="cakeTwo">Cream Cheese Pound Cake</option>
                    <option value="cakeThree">German Chocolate Cake</option>
                    <option value="cakeFour">Classic Yellow Cake</option>
                </select>
            </div>

            <br>

            <div class="form-group">
                <label for="yourName">Your name:</label>
                <input   name="name" type="text">
            </div>

            <br>

            <div class="form-group">
                <label for="message">Message</label>
                <input  name="message" type="text" placeholder="type your text you want written on the cake">
            </div>

            <br>

            <div class="form-group check"> <label for="includes">Includes:</label>
                <div class="checkbox-inner">

                    <div class="candle-inner">
                        <input type="checkbox" id="candle" name="candle" value="Candle">
                        <label for="candle">Candle</label>
                    </div>

                    <div class="candle-inner">
                        <input type="checkbox" id="candle" name="candle" value="Candle">
                        <label for="candle">Firework</label>
                    </div>

                    <div class="candle-inner">
                        <input type="checkbox" id="candle" name="candle" value="Candle">
                        <label for="candle">Toys</label>
                    </div>



                </div>
            </div>

            <br>

            <div class="form-group">
                <label for="deliveryDate">Deliver Date:</label>
                <input type="date" id="date" name="date">
            </div>

            <br>

            <div class="form-group">
                <label for='deliverTo'>Deliver to:</label>
                <textarea name='deliverTo' id="deliverTo" cols="30" rows="10"></textarea>
            </div>
            <br>

            <div class="form-group call">
                <label for="callBefore">Call before deliver?</label>
                <div class="Call-buttons">
                    <input type='radio' id="yes" name="callBefore" value="Yes">
                    <label for="yes">Yes</label>
                    <input type='radio' id="no" name="callBefore" value="No">
                    <label for="no">No</label>
                </div>
            </div>

            <br>

            <div class="form-group">
                <div class="cl"></div>
                <div class="sm">
                    <button type="submit" id="submit" class="submit" name="submit" value="bar">Order Now</button>
                </div>
            </div>
        </form>

    </div>

W3Schools 文章

幫助將不勝感激

uj5u.com熱心網友回復：

您的代碼存在問題：

1. 欄位name是錯誤的。
2. 您需要防止您的默認行為是重新加載或重定向以在提交之前處理它的資料。

function validateForm(event) {

    event.preventDefault(); // You didn't stop the subminssion default behavior
    
    let x = document.forms["contact"]["yourName"].value;

    if (x == "") {
        alert("Please Enter Your Name");
        return false;
    }
}

<form name="contact" onsubmit="validateForm(event)">
    <label for="yourName">Your name:</label>
    <!-- You used a wrong name -->
    <input name="yourName" type="text">

    <button type="submit" id="submit" name="submit" value="bar">Order Now</button>
</form>

這些天我們如何處理表格

const form = document.querySelector('#contact-form');

form.addEventListener('submit', (ev)=>{
  // Stop the form submission from reloading or redirecting
  ev.preventDefault();
  
  let yourName = document.querySelector('#your-name').value;
  
  if(yourName === ""){
    alert("Please Enter Your Name");
    return;
  }
  
  // Post the form with Fetch API or Axios ...
});

<form id="contact-form">
    <label for="yourName">Your name:</label>
    <input name="yourName" id="your-name" type="text">

    <button type="submit" id="submit" name="submit" value="bar">Order Now</button>
</form>

uj5u.com熱心網友回復：

我不知道這是否會解決您的問題（錯誤是什么？）但以下行：

<input name="name" type="text">

應該：

<input name="yourName" type="text">

標籤：javascript html css 形式

上一篇：有沒有辦法將變數添加到剪輯路徑url？

下一篇：如何將自定義樣式添加到輸入型別=“范圍”