如何使用 javascript 验证<输入类型 = "date" > 和<textarea></textarea>标记

当我尝试使用 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 标签来打印未填写该字段的错误，并使该标签的类 ="危险"。

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

文本区域： - 加载后您的文本区域已经包含空格 - 因此当您检查它是否为空时，它会找到内容，因此它被"填充">

(Institute_name == '')

所以我建议先删除前导和尾随空格，这样只会检查"真实内容"(js 方法trim会为你做到这一点(

( Institute_name.trim() == '')

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

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

您已经获得了该值(例如 2018-09-22(。因此访问该值两次

if(!DOB.value)

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

if(DOB == '')

除此之外，您可以随时检查它是否是有效的日期输入(请参阅在 JavaScript 中检测"无效日期"Date 实例(

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

相关内容

最新更新

热门标签：