带有弹出窗口的javascript表单

Question

Really basic, I'm just trying to understand how to test a form using simple JavaScript without jQuery etc. Tried W3Schools but didn't work. So I'm trying just a simple form instead with one field to get how it all works. Below I put a single field in a form, and thought I could test the fname variable against the firstName field.

But what happens is that the alert is never hit in the if statement. How to test the field firstName?

Any tips would be helpful.

 function validateForm() { var fname = document.getElementById("firstName"); if (fname == "") { alert("first name is a mandatory field"); } else { document.getElementById("formMessage").innerHTML = fname + " entered."; } } 

 <h2>Question 1 validate with alert popups</h2> <p>Please enter the following mandatory information</p> <form name="identification"> <p>First Name:<input type="text" id="firstName" /></p> <p> <button type="button" onclick="validateForm()">Submit</button> </p> </form> <p id="formMessage"></p> 

Answer 1

You're comparing the element itself. You should instead check the value of the element.

eg

var fname = document.getElementById("firstName").value;

Answer 2

fname is the element when you do document.getElementById, so you have to do:

function validateForm() {
            var fname = document.getElementById("firstName");
                if (fname.value == "") {
                    alert("first name is a mandatory field");
                } else {
                    document.getElementById("formMessage").innerHTML = fname.value + " entered.";
                }
            } 

You might also want to trim fname.value in case the user inputs bunch of empty spaces.

Answer 3

Use document.getElementById("firstName").value to get the value. if you don't add .value it means it didn't read the specified value.