Javascript validation

Question

Please help me. The validation is notworking

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

    if (fname==null || fname=="")
    {
        alert("Name should be entered correctly");
        return false;
    }

    if (lname==null || lname=="")
    {
        alert("Name should be entered correctly");
        return false;
    }

    if (isNaN(idnumber))
    {
        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==null || address=="")
    {
        alert("Please insert your address");
        return false;
    }
    if (isNaN(phonenumber))
    {
        alert("Please enter a valid phone number");
        return false;
    }


}
</script>
<form name="form1" action="validation.php" method="post"  onsubmit=" return validation(this);return false"> 
   Firstname:<input type="text" name="fname"><br/>
   Lastname:<input type="text" name="lname"><br/>
   Nation ID Number:<input type="text" name="idnumber"  minlength="8"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>

Answer 1

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>