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

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个问题。

文本区域：-文本区域在加载后已经包含空格-因此，当您检查文本区域是否为空时，它将找到内容，因此已“填充”

(Institute_name == '')

因此，我建议先删除开头和结尾的空格，以便仅检查“真实内容”（js方法trim将为您完成此操作）

( Institute_name.trim() == '')

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

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

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

if(!DOB.value)

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

if(DOB == '')

除此之外，您始终可以检查输入的日期是否有效（请参阅在JavaScript中检测“无效日期” Date实例）

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

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

问题描述

1 个解决方案

解决方案1
0 2018-09-22 08:08:40

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

问题描述

1 个解决方案

解决方案1 0 2018-09-22 08:08:40

解决方案1
0 2018-09-22 08:08:40