Form validation with java script

Question

Trying to validate a form but I am facing constant problems. Here is the code HTML:

 <form id="regForm" class="form-group" method="POST" action="signup.php">
                                <div class="col-md-12">
                                        <h2>Job Pocket</h2>
                                </div>
                                <div class="col-md-12">
                                    <input placeholder="email" class="form-control"type="text" name="email" id="email">
                                </div>
                                <div class="col-md-12">
                                    <input placeholder="password"  class="form-control" type="password" name="password" id="password">
                                </div>
                                <div class="col-md-12">
                                    <input placeholder="confirm password"  class="form-control" type="password" name="confirmpass" id="confirmpass">
                                </div>
                                <div class="container">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <input placeholder="first name"  class="form-control" type="text" name="first_name" id="first_name">
                                        </div>
                                        <div class="col-md-6">
                                            <input placeholder="last name"  class="form-control" type="text" name="last_name" id="last_name">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <input type="submit"  onclick="return validation()"class="btn btn-primary"name="submitsignup" id="submitsignup" value="submit">
                                </div>
                                <hr>
                            </form>
                        </div>
                    </div>              
                </div>
            </div>
        </div>
        </main>
        <p id="mg"></p>
    </div>

JavaScript:

<script type="text/javascript">
    function validation(){
      if(document.getElementById("email").value=="" || document.getElementById("password").value=="" || document.getElementById("last_name").value=="" || document.getElementById("first_name").value==""){

            document.getElementById("mg").innerHTML="Fill all fields";
            return false; 
        }
        var emails = document.getElementById("email").value;

        else if(emails.indexOf('@') <= 0){
            document.getElementById('mg').innerHTML =" ** @ Invalid Position";
            return false;
        }

        else if((emails.charAt(emails.length-4)!='.') && (emails.charAt(emails.length-3)!='.')){
            document.getElementById('mg').innerHTML =" ** . Invalid Position";
            return false;
        }

        else {
        document.getElementById("regForm").submit();
        }
}
</script>

The form keeps submitting itself. It works for the first if statement but after that it ignores the two else if and submits itself. Even if I comment out this statement, it still submits to signup.php

document.getElementById("regForm").submit();

At the moment I have no idea why it is submitting so I am adding the php code aswell.

if(isset($_POST['submitsignup'])){

$date = array();

if($_POST['email']=='' || $_POST['password']=='' || $_POST['first_name']=='' || $_POST['last_name']==''){
    $template->error="Please fill all fields";
           }}

I added this bit of code in the signup.php file for an extra check but I have seen that it strightup submits to signup.php.

Answer 1

EDIT: Updated answer to updated question

Your problem might be related to the fact that you have this line of code:

var emails = document.getElementById("email").value;

before the elseif , which might break the if elseif flow.

Try using this code instead:

function validation(){
    var emails = document.getElementById("email").value;
  if(emails=="" || document.getElementById("password").value=="" || document.getElementById("last_name").value=="" || document.getElementById("first_name").value==""){
        document.getElementById("mg").innerHTML="Fill all fields";
        return false; 
    }
    else if(emails.indexOf('@') <= 0){
        document.getElementById('mg').innerHTML =" ** @ Invalid Position";
        return false;
    }
    else if((emails.charAt(emails.length-4)!='.') && (emails.charAt(emails.length-3)!='.')){
        document.getElementById('mg').innerHTML =" ** . Invalid Position";
        return false;
    }
    else {
        document.getElementById("regForm").submit();
    }
}

Answer 2

Try with:

<input type="button"

instead:

type="submit"

Edit: otherwise your .submit() function is useless. -2 ? Tell me why using .submit() if the form as already submit type ?