Form Validation not working properly, proceeds without checking entries

Question

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._-]+@[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.

Answer 1

pseudo
$(button).on(click, function submitForm(){ if(form==valid){ ..... } }

Answer 2

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._-]+@[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;
}

Answer 3

The fault seems to be with the if condition firstly. You checks are incorrect.

if(firstname==null || firstname==" ")
    {alert("Please enter your first name");
    return false;
    }

You can change this to

if (firstname) {
    if (firstname.trim().length === 0) {
        alert("Please enter your first name");
        return false;
    }
} else {
    alert("Please enter your first name");
    return false;
}

Similarly you need to do the same for other if conditions too. You also have a space in the if condition firstname==null || firstname==" "

Fix those and the code should just run fine. Moreover it would be better to indent the code correctly as it affects the readability and it makes things easier to debug. Cheers