Visualforce redirection issue: JavaScript related Question

FYI, I have already posted this question on the parent site: stackoverflow.com

Here it is: How to Stop redirecting to the Parent URL from a div's Id

As this is basically a Visualforce related question, I am trying to see if anyone have encountered this kind of situation and had a solution.

I have a Visualforce page which is hosted publicly using Salesforce's Custom Urls. I have three different views (using div tag's Ids) with input forms.

One of the input forms:

<div class="container" id="leadForm1" ng-show="index == 1" >
  ...
  <apex:inputField id="compName" value="{!newPerson.SuppliedCompany}" required="true" 
                 label="Company" html-class="form-control form-control-max"/> 
  ...
  ...
  <apex:commandLink action="{!Applicant}" value="Submit" id="submitForm" onclick="doValidation();"/>
  ...
</div>

JavaScript:

<script>
function doValidation(){
        var samTemp = document.getElementById('{!$Component.vfPage.applicantForm.theEventBlock.compName}');
        //alert(samTemp);
        if(document.getElementById('{!$Component.vfPage.applicantForm.theEventBlock.compName}') == 'null'){
            if(alert('Please fill out all fields!')){
                window.location.href = '/InputForm#leadForm1';    
            }    
        }
        else{
            return;
        } 
    }
</script>

With the alert, I get an Ok button, and clicking on it taking me to the actual page(without sticking to the view, i.e., #leadForm1).

How can I make it not to redirect?

NOTE: I am trying to keep the user on the Input form until they provide some inputs to the required fields, as I am using toggle functionality within the actual Visualforce page to hide/show the input forms using:

if (x.style.display === 'none') {
            x.style.display = 'block';
        } else {
            x.style.display = 'none';
        }