Question

当我尝试使用javascript验证html形式的学院名称和出生日期不起作用时，我在Google中搜索了很多，但无法联系到我的查询解决方案。任何帮助都将受到赞赏。

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标签来打印未填写该字段的错误，并使该标签的类为“ danger”。

Answer 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）

顺便说一句。我建议您使用您喜欢的浏览器的Developer / Dev Tools-它确实可以帮助您调试js代码，检查变量等：-）

我如何使用javascript验证<input type =“ date” />和<textarea> </textarea>标签

1 个答案: