What's the best way of validating user input. PHP or Javascript?

Question

I am making a contact from and I almost finished it, but I want to make sure that it isn't easy for people to spam to my mail. At the moment I am checking if the user has filled in all fields using Javascript and if they don't, then there is an element text being changed to something like: "You have to fill in this field". Now I wanted to validate text and emails using the filter_var function from php and then change the text to something like: "Please fill in a valid email". This is the Javascript code I am using atm

$(document).ready(function() {
  document.getElementById('submitButton').onclick = function() {
    var firstName = document.forms["contactForm"]["firstName"].value;
    var lastName = document.forms["contactForm"]["lastName"].value;
    var email = document.forms["contactForm"]["email"].value;
    var message = document.forms["contactForm"]["message"].value;

    var submit = true;

    if (firstName == null || firstName == "") {
      document.getElementById("firstName_error").innerHTML = "Please enter your first name";
      submit = false;
    }

    if (lastName == null || lastName == "") {
      document.getElementById("lastName_error").innerHTML = "Please enter your last name";
      submit = false;
    }

    if (email == null || email == "") {
      document.getElementById("email_error").innerHTML = "Please enter your email";
      submit = false;
    }

    if (message == null || message == "") {
      document.getElementById("message_error").innerHTML = "Please enter your message";
      submit = false;
    }

    return submit;
  }

  document.getElementById("firstName").onkeyup = removeWarning;
  document.getElementById("lastName").onkeyup = removeWarning;
  document.getElementById("email").onkeyup = removeWarning;
  document.getElementById("message").onkeyup = removeWarning;
});

function removeWarning() {
  document.getElementById(this.id + "_error").innerHTML = "";
}