<form id="myForm">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" placeholder="Name">
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="Email">
  </div>
  <div id="errorMessage" style="color:red; margin-top:10px;"></div>
  <button type="submit">Submit</button>
</form>

* {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  box-sizing: border-box;
}
form div {
  margin-bottom: 10px;
}
label {
  display: inline-block;
  width: 60px;
}
input[type="text"], input[type="email"] {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
  width: 200px;
}
button[type="submit"] {
  padding: 8px 15px;
  background-color: #5cb85c;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 500;
}
button[type="submit"]:hover {
  background-color: #4cae4c;
}

document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // Prevent actual submission for demo
  var name = document.getElementById('name').value.trim();
  var email = document.getElementById('email').value.trim();
  var errorMessage = document.getElementById('errorMessage');
  errorMessage.textContent = '';

  if (name === '') {
    errorMessage.textContent = 'Name is required.';
    return;
  }

  if (email === '') {
    errorMessage.textContent = 'Email is required.';
    return;
  }

  var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailPattern.test(email)) {
    errorMessage.textContent = 'Please enter a valid email address.';
    return;
  }

  // If validation passes:
  alert('Form submitted successfully! (Demo)');
  // In a real scenario, you would allow the form to submit or use AJAX.
  // this.submit(); // or use AJAX
});