How to get system validations on the field fired before the JavaScript validations on the VisualForce page

Question

I am using a VF page having a custom controller. For simplicity, I am using 2 date fields - fromDate and toDate which belongs to a custom object.

There is a command button named Search on VF page which when clicked calls a javascript function to check if fromDate is greater than toDate.

Now the problem is when I enter "adbcg" (some garbage) in fromDate and some legitimate date in toDate and hit the search button, javascript function is getting called and not the system validation for date field. I first want the system validation to fire as in the fromDate should be highlighted to give Invalid date error.

Any help highly appreciated.

VF page---

<apex:page controller="FinancialSearchController" showheader="true">    
<script type="text/javascript">

        function checkValidations() {
            ....
            ...
        } 
 <script type="text/javascript">
 <apex:form id="FinancialDataSearchForm" > 
    <apex:outputLabel value="{!$ObjectType.Financial_Search__c.fields.fromDate__c.label}" for="priority"/>
    <apex:inputField id="fromDate" value="{!FSInputRecord.fromDate__c}"/>
    <apex:commandButton value="Search" onclick="checkValidations(); return false;" reRender="primaryResultsPanel, additionalResultsPanel"/>
 </apex:form >

Answer 1

I think you can create action function that saves record and runs system validations and have your JS validation in oncomplete button. However it is bad practice to have those mixed. You can have validation on server side. Try to use maximum out of apex:inputField to have better validation. For example to put JS function in onchange event. https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_inputField.htm