如何使用 javascript 验证 <input type = "date"> 和 <textarea></textarea> 标签答案

【问题标题】：How can i validate <input type = "date"> and <textarea></textarea> tag using javascript如何使用 javascript 验证 <input type = "date"> 和 <textarea></textarea> 标签
【发布时间】：2018-09-22 07:16:28
【问题描述】：

当我尝试使用 javascript 在我的 html 表单中验证研究所名称和出生日期时，它不起作用，我在谷歌中搜索了很多，但我无法找到我的查询的解决方案。任何类型的帮助表示赞赏。

function validation() {
  var first_name = document.getElementById('Fname').value;
  var last_name = document.getElementById('Lname').value;

  var Institute_name = document.myForm.institute.value;
  var DOB = document.getElementById('dob').value;

  if (first_name == "") {
    document.getElementById('fname').innerHTML = "** Please fill this field";
    return false;
  }

  if ((last_name == "") && (first_name != "")) {
    document.getElementById('lname').innerHTML = "** Please fill this field";
    document.getElementById('fname').innerHTML = "";
    return false;
  }

  if ((Institute_name == '') && (last_name != "")) {
    document.getElementById('InstituteE').innerHTML = "** Please fill this field";
    document.getElementById('branchE').innerHTML = "";
    return false;
  }

  if (!DOB.value) {
    document.getElementById('DateOfBirth').innerHTML = "Please enter a valid birthday";
    return false;
  }
}

<body>
  <div id="container">
    <div id="wall">
      <form action="" name="myForm" onsubmit="return validation()" method="POST" class="bg-light">

        <h1 style="text-align: center; font-size: 52px; color: bisque"><u>INTERNSHIP FORM</u></h1><br><br>
        <p>FIRST &nbsp;NAME :&nbsp;&nbsp;&nbsp;<input type="text" id="Fname" placeholder="First Name......" autocomplete="off">
          <span id="fname" class="text-danger"></span> LAST &nbsp;NAME :&nbsp;&nbsp;&nbsp;<input type="text" id="Lname" placeholder="Last Name........" autocomplete="off">
          <span id="lname" class="text-danger"></span>
        </p>

        <p>
          NAME &nbsp;OF &nbsp;THE &nbsp;INSTITUTE :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <br><br>
          <textarea name="institute" rows="3" cols="30" placeholder="Institute name...">
                            </textarea>
          <span id="InstituteE" class="text-danger"></span> DATE OF BIRTH :&nbsp;&nbsp;&nbsp;<input type="date" id="dob" autocomplete="off">
          <span id="DateOfBirth" class="text-danger"></span> </p>
        <p>
          <input type="submit" name="submit" value="SUBMIT" class="btn btn-success" style="padding: 20px; font-size: 28px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
          <input type="reset" name="reset" value="RESET" class="btn btn-primary" style="padding: 20px; font-size: 28px;">
        </p>

      </form>
      <br><br><br><br><br><br>
    </div>
  </div>

</body>
</code>

这里我使用span标签打印未填写该字段的错误，并将此标签的class=“危险”。

【问题讨论】：

请解释“不工作”。

标签： javascript html validation

【解决方案1】：

我在尝试使用您的代码时发现了 2 个问题。

Textarea: - 你的 textarea 在加载后已经包含空格 - 所以当你检查它是否为空时，它会找到内容，因此它是“填充的”

(Institute_name == '')

所以我建议先删除前导和尾随空格，这样只会检查“真实内容”（js方法trim会为你做这件事）

( Institute_name.trim() == '')

日期：当您访问日期字段时

var DOB = document.getElementById('dob').value;

您已经获得了价值（例如 2018-09-22）。所以访问该值两次

if(!DOB.value)

将始终评估为undefined / false。因此，只需再次检查变量，例如空字符串

if(DOB == '')

除此之外，您还可以随时检查它是否是有效的日期输入（请参阅Detecting an "invalid date" Date instance in JavaScript）

顺便说一句。我建议您查看您首选浏览器的开发人员/开发工具 - 它确实可以帮助您调试 js 代码、检查变量等 :-)

【讨论】：

if(!DOB.value) 将始终评估为 false 的断言是不正确的。从输入中获取值不会影响输入的值。由于是原语，所以值被复制到 DOB 并且输入的值不变。
没错 - 输入没有改变 - 但在 Don 的代码中，DOB 已经是输入的值（字符串） - 在这种情况下，DOB.value() 就是 undefined
好吧，你说的不太清楚。 !DOB.value 总是正确的。
能否提供给我您的电子邮件 ID，以便我可以将我的 html 文件发送给您，并进行更多验证。
不抱歉，如果您尝试过但仍然无法正常工作，请发布您当前的代码，我们会为您提供帮助