表单验证 return 个问题

Question

我正在尝试学习表单验证，但我无法弄清楚这里发生了什么。我正在关注 W3Schools 教程，验证表单函数出现错误，但在他们的示例中并没有这样做。

我尝试将示例复制并粘贴到我的项目中，只是更改了属性名称，但仍然出现错误。

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

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

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

    <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>
    <br>

    <label for="yourName">Your name:</label>
    <input name="name" type="text">
    <br>

    <label for="message">Message</label>
    <input name="message" type="text" placeholder="type your text you want written on the cake">
    <br>

    <label for="includes">Includes:</label>

    <input type="checkbox" id="candle" name="candle" value="Candle">
    <label for="candle">Candle</label>

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

    <input type="checkbox" id="candle" name="candle" value="Candle">
    <label for="candle">Toys</label>
    <br>

    <label for="deliveryDate">Deliver Date:</label>
    <input type="date" id="date" name="date">
    <br>

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

    <label for="callBefore">Call before deliver?</label>

    <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>
    <br>

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

</form>

Answer 1

我不知道这是否能解决您的问题（错误是什么？）但是以下行：

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

应该是：

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

Answer 2

您的代码有问题：

字段 name 错误。
您需要防止您的默认行为，即在提交前重新加载或重定向以处理数据。

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>

表单验证 return 个问题

Form validation return issues

html

javascript

forms

validation

我们现在如何处理表格