JavaScript data validation

There are a number of issues with that code:

• You really should not use the same <script> element for both calling src="javascript.js" and at the same time declare a function. Use separate elements, like this:

  <script type="text/javascript"  src="javascript.js"></script>
  <script type="text/javascript">
  function validation()
  {
      ...
  }
  </script>
  

• In the <form> element, there's a redundant ;return false. The form will take the value from return validation(this), anything after it will be ignored. Also, no need of ";" when using in-line javascript.

• You are passing passing this as argument to the validation() function, but validation is expecting no argument. Should be:

  function validation(oForm)

• If you are already passing this, why not use it? this is a reference to the element itself, so it is, for the validation function, a reference to the form. So no need to name the form.

  <form action="validation.php" method="post" onsubmit="return validation(this)"> 
  

And the references in function would be:

function validation(oForm)
{
    var fname=oForm["fname"].value;
    var lname=oForm["lname"].value;
}

Those changes alone could solve your problem. I'll check the code further to see if there is something else.

EDIT:

I've tested the validation now, and it works. The only required modification is removing the scr=validation.js from your <SCRIPT> tag. Use separate tags for that, as i suggested.

But i strongly suggest you consider the other issues I've mentioned.

Also, other suggestions regarding the validation itself:

• For alphanumerical fields, no need to check for null, only "" is enough. You can simply use:

      if (lname=="")
  

• First Name and Last Name error messages are the same. That will confuse users.

• Avoid testing phone numbers as numeric. Remember "(407) 234-5678" is a perfectly valid phone number, although it will fail your test. Unless you have a strong reason to treat it as numeric (automatic dialing?), leave it as an ordinary, text field.

• In the National ID field: There is no minlength in HTML. Only maxlength

• isNaN(idnumber) will return true if value is blank. And also if length<8. I assume it is a required field with a required length, so you should use:

      if (isNaN(idnumber) || idnumber.length != 8)
      {
          alert("Please enter a valid id number");
          return false;
      }
  

• For all your tests, consider trimming the values. Currently, input like " " (blanks only) WILL pass your test. Javascript has no built-in trim function, but it can be done with this:

  function trim( texto ) {

  return texto.replace(/^\s*|\s*$/g, "");
  

  }

And used like this:

var fname=trim(oForm["fname"].value);

• For clarity, use an explicit return true; in validation() after all tests successful.

Here is the suggested code after all changes:

    <script type="text/javascript" scr="validation.js"></script>
    <script type="text/javascript">
    function validation(oForm)
    {
        var fname       = trim(oForm["fname"].value);
        var lname       = trim(oForm["lname"].value);
        var idnumber    = trim(oForm["idnumber"].value);
        var email       = trim(oForm["email"].value);
        var atpos       = email.indexOf("@");
        var dotpos      = email.lastIndexOf(".");
        var address     = trim(oForm["address"].value);
        var phonenumber = trim(oForm["phonenumber"].value);

        if (fname=="")
        {
            alert("First name should be entered");
            return false;
        }

        if (lname=="")
        {
            alert("Last name should be entered");
            return false;
        }

        if (isNaN(idnumber) || idnumber.length != 8)
        {
            alert("Please enter a valid id number");
            return false;
        }

        if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
        {
            alert("Please enter a valid e-mail address");
            return false;
        }

        if(address=="")
        {
            alert("Please insert your address");
            return false;
        }
        if (isNaN(phonenumber))
        {
            alert("Please enter a valid phone number");
            return false;
        }

        return true;

    }
    function trim( texto ) {

        return texto.replace(/^\s*|\s*$/g, "");

    }

    </script>
    <form name="form1" action="validation.php" method="post" onsubmit="return validation(this)"> 
       Firstname:<input type="text" name="fname"><br/>
       Lastname:<input type="text" name="lname"><br/>
       Nation ID Number:<input type="text" name="idnumber" maxlength="8"><br/>
       Email address: <input type="text" name="email"><br/>
       Address:<input type="text" name="address"><br/>
       Pnone number:<input type="text" name="phonenumber"><br/>
       <input type="reset" name="reset" value="reset">
       <input type="submit" name="submit" value="submit">
    </form>