Im trying to learn form validation and I cannot seem to figure out what is going on here. I am following a w3schools tutorial and the validate form function is giving an error on return when it is not doing that on their example. I tried copy and pasting the example into my project and just chaging the property names and it still gives an error. Belove I have put all the code for the form and the javascript aswell as links to the w3schools artice.

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

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

 <div >

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

            <h1>Order Now</h1>



            <hr>

            <br>

            <br>

            <div >
                <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 >
                <label for="yourName">Your name:</label>
                <input   name="name" type="text">
            </div>

            <br>

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

            <br>

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

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

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

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



                </div>
            </div>

            <br>

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

            <br>

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

            <div >
                <label for="callBefore">Call before deliver?</label>
                <div >
                    <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 >
                <div ></div>
                <div >
                    <button type="submit" id="submit"  name="submit" value="bar">Order Now</button>
                </div>
            </div>
        </form>

    </div>

W3Schools Article

Help would be appreciated

CodePudding user response：

I don't know if this will solve your problem (what was the error?) but the following line:

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

Should be:

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

CodePudding user response：

Issues with your code:

1. The field name was wrong.
2. You need to prevent your from default behavior which is reload or redirect to process it's data before submiting.

function validateForm(event) {

    event.preventDefault();
    
    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>
    <input name="yourName" type="text">

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

</form>

more explanation is coming