Validation of the form does not work properly, proceeds without checking entries

advertisements

The code in Javascript is here :

<script  type="text/javascript">

function validateForm()
{
    var firstname=document.getElementById("firstname").value;
    var tel=document.getElementById("tel").value;
    var textarea=document.getElementById("textarea").value
    var email1=document.getElementById("email1").value;
    var email2=document.getElementById("email2").value;

if(validate_req(firstname,tel,textarea,email1,email2)==true&&
validate_name(firstname)==true&&
isnumeric(tel)==true&&
isAlpha(prof)==true&&
validate_email(email1)==true&&
validate_email(email2)==true&&
equal_emails(email1,email2)==true)
return true;
else
return false;}

function validate_req(firstname, tel,textarea,email1,email2)
{ if(firstname==null || firstname==" ")
    {alert("Please enter your first name");
    return false;
    }
if(tel==null || tel==" ")
    {alert("Please enter your telephone");
    return false;
    }
if(email1==null || email1==" ")
    {alert("Please enter your email");
    return false;
    }
if(email2==null || email2==" ")
    {alert("Please repeat your email");
    return false;
    }
if(textarea==null || textarea==" ")
    {alert("Please enter your message");
    return false;
    }
    return true;
}

function validate_name(firstname){
    if(firstname.length>20){
        alert("Name is longer than 20 characters");
        return false;
    }
    return true;
}
function isNumeric(tel)
    var numberpattern = /^(-0+[0-9]{2}-)[0-9]{3}-[0-9]{4}$/;

    if(numberPattern.test(tel)==false){
        alert("Please enter correct telephone number");
        return false;
    }
    else return true;
    }
function validate_email(email1){
    var emailPattern = /^[a-zA-Z0-9._-][email protected][a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    if(emailPattern.test(email1)==false{
        alert("Please check your email");
        return false;
    }
    else return true;
}
function equal_emails(email1,email2){
    if(email1!=email2){
        alert("Email are not the same");
        return false;
        }
        return true;
}
</script>

The code for the form is here :

 <form action="confirm.html" method="post" onSubmit="return validateForm();">
<table width="50%" border="3" cellspacing="3%" cellpadding="3%" id="table1">
<tbody>
<tr>
  <th colspan="2" style="text-align: center" scope="col" >Contact Us by Filling Out The Form</th>
  </tr>
<tr>
  <td colspan="2">Required field*</td>
  </tr>
<tr>
  <td width="44%"><label for="firstname">Name:*</label></td>
  <td width="56%"><input name="firstname" type="text" id="firstname" maxlength="20"></td>
</tr>
<tr>
  <td><label for="address">Address:</label></td>
  <td><input type="text" name="address" id="address"></td>
</tr>
<tr>
  <td><label for="email1">Email:*</label></td>
  <td><input type="email" name="email1" id="email1"></td>
</tr>
<tr>
  <td><label for="email2">Retype your Email:*</label></td>
  <td><input type="email" name="email2" id="email2"></td>
</tr>
<tr>
  <td>Are you a member of our website?</td>
  <td><p>
    <label>
      <input type="radio" name="RadioGroup1" value="Member" id="RadioGroup1_0">
      Member
    </label>
    <br>
    <label>
      <input type="radio" name="RadioGroup1" value="Non-member" id="RadioGroup1_1">
      Non-member
    </label>
    <br>
  </p></td>
</tr>
<tr>
  <td><label for="tel">Telephone number:*</label></td>
  <td><input type="tel" name="tel" id="tel"></td>
</tr>
<tr>
  <td><label for="textarea">Queries/ Comments:*</label></td>
  <td><textarea name="textarea" id="textarea"></textarea></td>
</tr>
<tr>
  <td colspan="2"><input type="submit" name="submit" id="submit" value="Submit"></td>
  </tr>
</tbody>
</table>
</form>

After pressing submit button, the form continues to confirm.html without checking the entries. I can leave them blank, I can write letters into first name field and it still proceeds to confirm page. I am unsure why this is happening so I decided to ask you guys.


Your code is fine, aside from a few erroneous errors/issues with case-sensitivity.

For example:

if(validate_req(firstname,tel,textarea,email1,email2)==true&&
    validate_name(firstname)==true&&
    isnumeric(tel)==true <----- isnumeric() doesn't exist, but isNumeric() does.

I've cleaned up those errors for you. The following JS is syntactically correct:

function validateForm()
{
    var firstname=document.getElementById("firstname").value;
    var tel=document.getElementById("tel").value;
    var textarea=document.getElementById("textarea").value
    var email1=document.getElementById("email1").value;
    var email2=document.getElementById("email2").value;

if(validate_req(firstname,tel,textarea,email1,email2)==true&&
validate_name(firstname)==true&&
isNumeric(tel)==true&&
isAlpha(prof)==true&&
validate_email(email1)==true&&
validate_email(email2)==true&&
equal_emails(email1,email2)==true)
return true;
else
return false;}

function validate_req(firstname, tel,textarea,email1,email2)
{ if(firstname==null || firstname==" ")
    {alert("Please enter your first name");
    return false;
    }
if(tel==null || tel==" ")
    {alert("Please enter your telephone");
    return false;
    }
if(email1==null || email1==" ")
    {alert("Please enter your email");
    return false;
    }
if(email2==null || email2==" ")
    {alert("Please repeat your email");
    return false;
    }
if(textarea==null || textarea==" ")
    {alert("Please enter your message");
    return false;
    }
    return true;
}

function validate_name(firstname){
    if(firstname.length>20){
        alert("Name is longer than 20 characters");
        return false;
    }
    return true;
}
function isNumeric(tel) {
    var numberPattern = /^(-0+[0-9]{2}-)[0-9]{3}-[0-9]{4}$/;

    if(numberPattern.test(tel)==false){
        alert("Please enter correct telephone number");
        return false;
    }
    else return true;
}
function validate_email(email1) {
    var emailPattern = /^[a-zA-Z0-9._-][email protected][a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    if(emailPattern.test(email1)==false){
        alert("Please check your email");
        return false;
    }
    else return true;
}
function equal_emails(email1,email2){
    if(email1!=email2){
        alert("Email are not the same");
        return false;
        }
        return true;
}