[SalesForce] Alert/show message after saved VFP

To display error messages in the Visualforce page add below tag where you want to display the error message.

Visualforce page:

<apex:pageMessages />

Apex Controller:

ApexPages.Message myMsg = new ApexPages.Message(ApexPages.Severity.ERROR,'Error Message.');
ApexPages.addMessage(myMsg); 

(Or)

ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.ERROR,'Error Message.'));

I think your action method will be called in the wrong spot so maybe consider creating an action function and then calling that instead of doing it using the action attribute. This will allow you to call your server method at the exact right time in your JS (after the form has been submitted and validated).

<apex:actionFunction name="applicant" action="{!Applicant}"/>
<apex:commandButton value="Submit" onclick="onSubmit();" styleClass="btn-custom btn-primary submitForm"/>

Then in your JS:

function onSubmit(){
    var isSubmit = confirm('Are you sure you want to Submit?');
    var isValid == validateForm();

    if(isSubmit && isValid){
        alert('Your input was received successfully. We will contact you soon!');
        applicant(); // Call your server method after displaying your alert
    } else {
        alert('Please fill out the required fields!');
    }
}

function validateForm() {
    if (...) {
        return true;
    } else {
        return false;
    }
}

Disclaimer:

This is a SF site, not a JS site. If you need more assistance with JS visit http://stackoverflow.com

Update based on chat

To show a success message after the save is successful use <apex:pageMessages functionality.

Add the tag to your vf page where you want the message to be displayed, than in your controller do the following:

try {
    upsert record;
    ApexPages.addMessage(new ApexPages.message(
        ApexPages.SEVERITY.Confirm,
        'Record successfully saved'
    ));
} catch (Exception ex) {
    ApexPages.addMessage(new ApexPages.message(
        ApexPages.SEVERITY.Fatal,
        ex.getMessage()
    ));
}

Another update

Since you absolutely need alert messages and you don't want to convert your controller into code using the AJAX toolkit due to complexity, you can try to do the following workaround that should work although it's quite ugly.

First, you need to create a variable in your controller to store whether or not the operation is successufl. I'm including a message parameter just to show you how that would work, take it or leave it.

public boolean saveSuccessful {get; set;}
public string message {get; set;}

Then, you'll need to set the variable when a save is successful:

try {
    upsert record;
    saveSuccessful = true;
    message = 'YAY!!';
} catch(DMLException) {
    saveSuccessful = false;
    message = ex.getMessage();
}

Then, in your page, you put a JS that uses these variables into an output panel. Re-render the panel after the operation. The JS can look 1 of two ways so Ill show them both:

<apex:outputPanel id="renderTarget">
    <script>
        // message on page
        if ('{!saveSuccessful}' === 'true') {
            alert('Yay!');
        } else if ('{!saveSuccessful}' === 'false') {
            alert('Boo!');
        }

        // -OR-
        // message in controller
        if ('{!saveSuccessful}' !== 'null') {
            alert('{!message}');
        }
    <script>
</apex:outputPanel>

Lastly, make sure you rerender this panel after the operation:

<apex:actionfunction action="" rerender="renderTarget"/>

OR

<apex:commandButton action="" rerender="renderTarget"/>

Which ever suits your needs better.

When the output panel is re-rendered, the javascript will run and the isSuccessful variable will now have a value so the JS should show a message. You'll have to take steps to make sure that your message is not displayed at incorrect times.