Activate download button on js

Question

I have a form that requires you to fill in the name and email to download a file. But I don’t understand enough js to disable the download button until the other fields are valid, IE, the button works and downloads at the moment, regardless of whether the name and email fields are filled or not.

Can anyone tell me if it is possible to make the download only if the other fields are filled?

Button in the HTML:

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

JS:

  var name = document.getElementById("name").value;
  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("Obrigado!");
  return true;
}

Thank you!

Answer 1

In onclick you can point to a js function that contains your code. There instead of true Return you can use the same code you currently have on the onclick button.

Something like that (untested):

<button type="submit" onclick="downloadFile()">Download</button>

function downloadFile(){
var name = document.getElementById("name").value;
  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("Obrigado!");
  window.location.href='download/CV.pdf'
}

}