You can overwrite the standard salesforce error message css classes. In my example i have a simple error message with only short summary and a custom icon. So i took all error css classes and changed the icon. Then i have wrapped my message in a outputPanel and edited the message class (but only for this output panel): removed background and border. You can pack that two css classes to the static resource and include on your pages. Don't forget to wrap the custom message into the output panel:
<style>
.errorM4 .msgIcon, .errorSmall {
background-image: url(/img/samples/flag_red.gif) !important;
}
.myCustomMessage .message {
background: none !important;
border: none !important;
}
</style>
<apex:outputPanel styleClass="myCustomMessage">
<apex:pageMessage severity="error"
strength="1"
summary="Some error text" />
</apex:outputPanel>

Or a different hack is hide the standard error message using display none and oncomplete call a custom message now get the body of error message if it contains a message then display the message in alert box or if you are using Bootstrap then model . These are two option which you can use.