Issues with form validation with Javascript

Question

I am having some issues validating my input fields with using Javascript.

I'm trying to make it so when u put for example your name in the input field, it should appear as a green border (which kinda works already) and when nothing is filled in, it should return as a red border and not be allowed to send the form. (it doesn't actually need to send it, no php).

It also should rewrite the placeholder (in this case) with the name you entered.

It should validate all the fields before pressing the button. (so they should all turn out red or green, currently does it only for the first input field)

Also, could you help me out with validating the email field on a legit adress (so validating the @ and a .).

function nietLeeg() {
  var tekstveld = document.getElementById('checkField');
  if (tekstveld.value != "") {
    document.getElementById("checkField").style.borderColor = "green";
    document.getElementById("checkField").value = "";
  } else {
    document.getElementById("checkField").style.borderColor = "red";
  }
}

<form method="POST" action="#">
  <input type="text" id="checkField" value="your name">
  <input type="email" id="checkField" value="your email">
  <textarea rows="4" cols="50" placeholder="Write your message here"></textarea>
  <input type="button" class="submitbtn" value="Send" onclick="nietLeeg();">
</form>