在 javascript 中启用和禁用下载按钮

Question

I made a form that asks for name and email in order to download a file. The problem is that the "Download" button is working whether you fill up the name or not, even though it shows the message informing that theres missing information to download the file.

I don't have enough js knowledge to figure out a way to make the "Download" button work work when the name and email is entered.

Can someone help? Please!

HTML Download button:

<button type="submit" onclick="window.location.href='download/CV.pdf'">Download</button>

JS:

  var email = document.getElementById("email").value;
  var error_message = document.getElementById("error_message");

  error_message.style.padding = "10px";

  var text;
  if(name.length < 5){
    text = "Please Enter valid Name";
    error_message.innerHTML = text;
    return false;
  }
  if(email.indexOf("@") == -1 || email.length < 6){
    text = "Please Enter valid Email";
    error_message.innerHTML = text;
    return false;
  }
  alert("Thank you!");
  return true;
}

Thank you!

Answer 1

You can do it like this.

  <form onsubmit="return validateForm(event)">
    <button type="submit">Download</button>
    <input type="text" id="email" placeholder="Email">
    <input type="text" id="name" placeholder="Name">
  </form>

  ...

  function validateForm(event) {
    event.preventDefault();

    var email = document.getElementById("email").value;
    var name = document.getElementById("name").value;
    var error_message = document.getElementById("error_message");

    error_message.style.padding = "10px";

    var text;
    if(name.length < 5){
      text = "Please Enter valid Name";
      error_message.innerHTML = text;
      return;
    }
    if(email.indexOf("@") == -1 || email.length < 6){
      text = "Please Enter valid Email";
      error_message.innerHTML = text;
      return;
    }
    window.location.href = "download/CV.pdf";
  }