Validating multiple form boxes, javascript

Question

I'm trying to make sure each field is filled in, else show an error. When I submit my form it goes through and no error is shown? Can anyone see whats wrong?

here is my form HTML

<form id="Form" name="Form" method: "post" action: '#' onsubmit="return validateForm()">
    <fieldset>
        <label>First name:*<br>
            <input name="fname" id ="fname" type="text"></label><br>
        <label>Last name:*<br>
            <input name="lname" id="lname" type="text"></label><br>
        <label>Email:*<br>
            <input name="email" id="email" type="text"></label><br>
        <label>Phone:<br>
            <input name="phone" id="phone" type="text"></label><br>
        <label>Message:*<br>
            <input id="message" id="message" name="msg" type="text"></label><br>
        <br>
        <input name="submit" type="submit" value="send"><br>
    </fieldset>
</form>

And here is my JS

function validateForm() {
    var errormessage = "";

    if (document.getElementbyID('fname').value == "") {
        errormessage += "enter your first name /n";
        document.getElementById('fname').style.borderColor = "red";
    }
    if (document.getElementbyID('lname').value == "") {
        errormessage += "enter your last name /n";
        document.getElementById('lname').style.borderColor = "red";
    }
    if (document.getElementbyID('email').value == "") {
        errormessage += "enter your email /n";
        document.getElementById('email').style.borderColor = "red";
    }
    if (document.getElementbyID('message').value == "") {
        errormessage += "enter your message /n";
        document.getElementById('message').style.borderColor = "red";
    }
    if (errormessage != "") {
        alert(errormessage);
        return false;
    }
}

try adding a required tag in the html inputs, like <input type="text" id="fname" name="fname" required/> — nick zoum
– nick zoum, Commented May 15, 2017 at 14:46

Quentin · Accepted Answer · 2017-05-15 14:47:20Z

4

Open the Developer Tools in your browser. Look at the Console. Ensure that the "Preserve log" option is enabled so the errors are not lost when the form submits.

Uncaught TypeError: document.getElementbyID is not a function

JavaScript is case-sensitive. ID is not Id. You need to get the names of your function calls correct.

When your JS throws an exception, the function aborts, and form submission continues as normal.

answered May 15, 2017 at 14:47

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user8014896 Over a year ago

Thanks, have changed the "id" but still no errors show.

Quentin Over a year ago

What does the console say? (because you changed to ID instead of from ID)

Collectives™ on Stack Overflow

Validating multiple form boxes, javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related