HTML registration form with JS validation

Assumptions: the form is named regForm; Name may contain only letters (and spaces); Phone may contain only digits; Interest must contain 20 to 1000 characters.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>User Registration</title>
<style>
  body  { font-family: Arial; }
  table { margin: 20px auto; border: 1px solid #666; padding: 10px; }
  td    { padding: 6px; }
  .err  { color: red; font-size: 13px; }
</style>
<script>
function validateForm() {
  var f = document.forms["regForm"];
  var name = f.name.value.trim();
  var email = f.email.value.trim();
  var phone = f.phone.value.trim();
  var interest = f.interest.value.trim();
  var gender = f.gender.value;            // "" if none selected
  var msg = "";

  // i. all fields compulsory
  if (name == "" || email == "" || phone == "" || gender == "" || interest == "") {
    alert("All fields are compulsory.");
    return false;
  }
  // ii. name: only characters
  if (!/^[A-Za-z ]+$/.test(name)) {
    msg += "Name must contain only letters.\n";
  }
  // iii. phone: only numbers
  if (!/^[0-9]+$/.test(phone)) {
    msg += "Phone must contain only digits.\n";
  }
  // iv. email format
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    msg += "Enter a valid email address.\n";
  }
  // v. interest length 20 - 1000
  if (interest.length < 20 || interest.length > 1000) {
    msg += "Interest must be between 20 and 1000 characters.\n";
  }
  if (msg != "") { alert(msg); return false; }
  return true;                           // submit the form
}
</script>
</head>
<body>
<form name="regForm" action="register.php" method="post" onsubmit="return validateForm()">
  <table>
    <tr><td colspan="2" align="center"><h3>User Registration Form</h3></td></tr>
    <tr><td>Name</td><td><input type="text" name="name"></td></tr>
    <tr><td>Email</td><td><input type="text" name="email"></td></tr>
    <tr><td>Gender</td>
        <td><input type="radio" name="gender" value="Male"> Male
            <input type="radio" name="gender" value="Female"> Female</td></tr>
    <tr><td>Phone</td><td><input type="text" name="phone"></td></tr>
    <tr><td>Interest</td>
        <td><textarea name="interest" rows="5" cols="30"></textarea></td></tr>
    <tr><td colspan="2" align="center"><input type="submit" value="Register"></td></tr>
  </table>
</form>
</body>
</html>

Explanation

• onsubmit="return validateForm()" runs validation first; returning false cancels submission.
• f.gender.value returns the checked radio's value (empty if none).
• f.name, f.email, f.phone and f.interest refer to the form controls with those name attributes (a named control takes priority over the form's own property of the same name).
• Regular expressions check each rule: /^[A-Za-z ]+$/ letters only, /^[0-9]+$/ digits only, and a basic email pattern text@text.text. If the phone must also be exactly 10 digits, use /^[0-9]{10}$/.
• interest.length is compared with 20 and 1000.
• The server must validate again, because client-side checks can be bypassed.