时间戳

首页 > 解决方案 > 在javascript中启用和禁用下载按钮

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

问题描述

我制作了一个表格，要求提供姓名和电子邮件以下载文件。问题是，无论您是否填写名称，“下载”按钮都可以正常工作，即使它显示消息，通知缺少下载文件的信息。

我没有足够的 js 知识来找出在输入名称和电子邮件时使“下载”按钮工作的方法。

有人可以帮忙吗？请！

HTML 下载按钮：

<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;
}

谢谢！

标签： javascripthtmlformsvalidation

解决方案

你可以这样做。

  <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";
  }

推荐阅读