Shouldn't empty fields submit be prevented directly by the Javascript?

Yes you are correct, it makes more sense to do validation on the client side because it improves the UX drastically. There are numerous ways to do that either in plain JS like this:

function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("Name must be filled out");
        return false;
    }
}

or using numerous libraries like Parsley (which is helpful for complex data). http://parsleyjs.org/. In my opinion the best way to validate a form is to actively check what the user is typing and make sure it meets the requirements, so for example as they are typing an email the box won't show a checkmark beside it until the .com or whatever is at the end is put in. You've probably seen this on password forms so that the user can see if they have met the minimum requirements.

Edit: As Petros mentioned, you should always double check the data server side as well because the javascript can be modified so that the form can still submit even with incorrect data but at least from a usability perspective doing it client side should be done as well as server side.

Yes, you can do it, but it's not safe and pretty useless.

JS could be used for a 1st step check only, and just for improve the user experience. After that you should use a server side validation.

This is simply because the user can see, modify and ignore everything you code in JS. This code is passed to the browser (clearly) and is the browser that elaborate this code and make things append (like animations ecc...)

On the other hand everything you code in php is not visible for the user. They don't know what you coded, consequently they don't know how to (and actually they can't) avoid your validation on the server side. This is because the server elaborate the code and send to the browser an "answer". So, if the browser with JS have the duty of run a code to find a solution, in PHP a server already run the code, and provide the solution to the browser. The user can modify the code you wrote in JS, but can't modify something that is on your server.

+1 for ALWAYS VALIDATE SERVER SIDE.