OctoberCMS is one of the best CMS out there, working on Laravel engine. everything about it is beautiful beside the JavaScript validations on frontend. I wrote js to make them look better. Just remember that this has been written for frontend theme with Bootstrap theme. If you don't have one, you might need to do few styling but this should work.

$(document).ready(function() {
    $(window).on('ajaxErrorMessage', function(event, message){
        event.preventDefault();
    });
    $('button[type="submit"]').click( function(event)
    {
        var form = $(this).closest('form')[0];
        $(form).ajaxError(function(event, obj, context, status,response){
            var message;
            console.log(response);
            if(typeof response.responseJSON === 'undefined') {
                message = response.responseText.match(/^\"(.*)\"\s/)[1];
            } else {
                message = response.responseJSON.X_OCTOBER_ERROR_FIELDS;
            }
            $('.form-group').removeClass('has-error');
            $('.form-group .err_label').remove();
            if( typeof message === 'object' ) {
                for(var key in message) {
                    if (key.indexOf('.') > -1) {
                        console.log(key);
                        var to_be_replated=(key.replace('_', ' ').replace('_', ' ').replace('_', ' '));
                        var field = key.split(".");
                        var alert_message=message[key][0].replace( to_be_replated, ' ');
                        alert_message=alert_message.replace( 'The', 'This');
                        $(this).find('input[name="extra_fields['+ field[1] +']"]').parent().addClass('has-error');
                        $(this).find('input[name="extra_fields['+ field[1] +']"]').after('' +
                        '<div class="err_label"><label class="text-danger">' +
                        alert_message+'</label></div>');

                    } else {

                        var to_be_replated=(key.replace('_', ' '));
                        var alert_message=message[key][0].replace( to_be_replated, ' ');
                        alert_message=alert_message.replace( 'The', 'This');
                        $(this).find('input[name="'+ key +'"]').parent().addClass('has-error');
                        $(this).find('input[name="'+ key +'"]').after('' +
                        '<div class="err_label"><label class="text-danger">' +
                        alert_message+'</label></div>');
                    }
                }
            } else {
                alert(message);
            }
        });

        $(form).ajaxSuccess(function(event, obj, context, status,response){
            $('.form-group').removeClass('has-error');
            $('.form-group .err_label').remove();

        }); 
    });
});