html - Javascript text field validation

I am having difficulty validating a form in javascript. I'm currently checking just a text field and it doesn't work. My code is as followed:

index.html:

<html xmlns = "">
<head> 
    <title>
        Validation Form
    </title>
    <script type = "text/javascript" src ="vForm.js">
    </script>
</head>
<body>
    <form id = "myForm" action ="">
        First name: <input type="text" name="fname"></br>
        Last name: <input type="text" name="lname"></br>
        Password: <input type="password" name="pass1"></br>
        Re-enter password: <input type="password" name="pass2"></br>
        Email: <input type="text" name="email"></br>
        Phone: <input type="text" name="phone"></br>
        Address: <input type="text" name="add"></br>
        Date: <input type="date" name="date"></br>
        Time: <input type="time" name="time"></br>
        <input type="reset" name="reset">
        <input type="submit" name="submit">
    </form>
    <script type = "text/javascript" src ="vFormRun.js">
    </script>
</body>
</html>

vForm.js:

function validateForm()
{
    var fname = document.getElementById("fname");
    var lname = document.getElementById("lname");
    var pass1 = document.getElementById("pass1");
    var pass2 = document.getElementById("pass2");
    var email = document.getElementById("email");

    if(fname == "")
    {
        alert("Please enter first name")
        return false;
    }
    else
    {
        return true;
    }
}

vFormRun.js:

document.getElementById("myForm").onsubmit = validateForm;

I am having difficulty validating a form in javascript. I'm currently checking just a text field and it doesn't work. My code is as followed:

index.html:

<html xmlns = "http://www.w3/1999/xhtml">
<head> 
    <title>
        Validation Form
    </title>
    <script type = "text/javascript" src ="vForm.js">
    </script>
</head>
<body>
    <form id = "myForm" action ="">
        First name: <input type="text" name="fname"></br>
        Last name: <input type="text" name="lname"></br>
        Password: <input type="password" name="pass1"></br>
        Re-enter password: <input type="password" name="pass2"></br>
        Email: <input type="text" name="email"></br>
        Phone: <input type="text" name="phone"></br>
        Address: <input type="text" name="add"></br>
        Date: <input type="date" name="date"></br>
        Time: <input type="time" name="time"></br>
        <input type="reset" name="reset">
        <input type="submit" name="submit">
    </form>
    <script type = "text/javascript" src ="vFormRun.js">
    </script>
</body>
</html>

vForm.js:

function validateForm()
{
    var fname = document.getElementById("fname");
    var lname = document.getElementById("lname");
    var pass1 = document.getElementById("pass1");
    var pass2 = document.getElementById("pass2");
    var email = document.getElementById("email");

    if(fname == "")
    {
        alert("Please enter first name")
        return false;
    }
    else
    {
        return true;
    }
}

vFormRun.js:

document.getElementById("myForm").onsubmit = validateForm;

Share Improve this question edited Sep 30, 2012 at 18:05 yodog 6,2724 gold badges28 silver badges51 bronze badges asked Sep 30, 2012 at 17:52 Ryan Sayles 3,44111 gold badges58 silver badges80 bronze badges

4 basic javascript. missed .value. – yodog Commented Sep 30, 2012 at 17:57
1 off-topic: you haven't specified if you're validating the data on the server side as well, but in case you aren't, be aware that JS validation can be bypassed by the user: it can be helpful, but it shouldn't be considered secure. Validate the same data on the server side as well. – Spudley Commented Sep 30, 2012 at 17:58
The homework tag is now officially deprecated – nKandel Commented Sep 30, 2012 at 17:58
Here is a great example of where debugging (via Firebug or the equivalent tool in Chrome etc) would be really useful. Put a breakpoint on the line after var fname = ... and you would see that the element has a property called value with the right thing in. Learn it, save yourself a lot of effort. – Phil H Commented Sep 30, 2012 at 17:59
@RASG is correct, should be: var fname = document.getElementById("fname").value; var lname = document.getElementById("lname").value; var pass1 = document.getElementById("pass1").value; var pass2 = document.getElementById("pass2").value; var email = document.getElementById("email").value; – pixel 67 Commented Mar 16, 2014 at 23:36

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

You need to give .value to each of it. And also, give an id of the same name.

function validateForm()
{
 var fname = document.getElementById("fname");
 var lname = document.getElementById("lname");
 var pass1 = document.getElementById("pass1");
 var pass2 = document.getElementById("pass2");
 var email = document.getElementById("email");

 if(fname.value == "")
 {
   alert("Please enter first name")
   return false;
 }
 else
 {
   return true;
 }
}

document.getElementById("fname");

That will only work if you have an element with an ID of fname, which you do not.

You can set the ID attribute to an element like so:

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

Alternatively, you can reference the form elements like this:

var fname = document.forms["myForm"]["fname"]

Then you want to get it's value property when paring.

fname.value

The <br> tag is self closing, so it should be <br /> instead of </br>

Here is the solution...

function validateForm(form) {
    var fname = form.fname,
        lname = form.lname,
        pass1 = form.pass1,
        pass2 = form.pass2,
        email = form.email;

    if(fname && fname.value === "") {
        alert("Please enter first name");
        document.getElementById('result').innerHTML = 'Invalid';
        return false;
    }
    document.getElementById('result').innerHTML = 'Passed';
    return true;
}

<form id="myForm" action="" onsubmit="validateForm(this)">
    First name: <input type="text" name="fname"><br/>
    Last name: <input type="text" name="lname"><br/>
    Password: <input type="password" name="pass1"><br/>
    Re-enter password: <input type="password" name="pass2"><br/>
    Email: <input type="text" name="email"><br/>
    Phone: <input type="text" name="phone"><br/>
    Address: <input type="text" name="add"><br/>
    Date: <input type="date" name="date"><br/>
    Time: <input type="time" name="time"><br/>
    <input type="reset" name="reset">
    <input type="submit" name="submit">
  <p id="result">
  </p>
</form>

There were a few issues here that I corrected.

I changed all of the var declarations to use one var declaration. This is a best practice.
In the if statement I added a check for the variable fname to make sure it exists and is not null (prevents a null reference error).
In the if statement you need to check the value attribute of the filed, not the field itself. In your old code if it is blank or not the field should be there and would have always returned true.
I changed the parison to use === instead of ==. When using ==, if the value is "false" or 0 it will return true. See "Difference between == and === in JavaScript".
You were missing a semicolon at the end of the alert statement.
If the body of the if ends with a return then you do not need an else block. Cuts down the amount of code (downloads faster) and makes it easier to read.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Javascript text field validation - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)