我如何验证 <input type = “date”> 和 <textarea></textarea> 使用javascript标记
[英]How can i validate <input type = “date”> and <textarea></textarea> tag using javascript
问题描述
When i try to validate Institute name and date of birth in my html form using javascript it is not working, i searched alot in google but i am not able to reach to the solution of my queries. 
当我尝试使用javascript验证html表单中的研究所名称和出生日期时，它不起作用，我在google中进行了大量搜索，但无法联系到我的查询解决方案。 Any type of help is appreciated. 任何类型的帮助，我们感激不尽。
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 NAME : <input type="text" id="Fname" placeholder="First Name......" autocomplete="off"> <span id="fname" class="text-danger"></span> LAST NAME : <input type="text" id="Lname" placeholder="Last Name........" autocomplete="off"> <span id="lname" class="text-danger"></span> </p> <p> NAME OF THE INSTITUTE : <br><br> <textarea name="institute" rows="3" cols="30" placeholder="Institute name..."> </textarea> <span id="InstituteE" class="text-danger"></span> DATE OF BIRTH : <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;"> <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>
Here I am using span tag to print the error of not filling that field, and made this tag's class = "danger". 在这里，我使用span标记来打印未填充该字段的错误，并使该标记的类为“ danger”。
1 个解决方案
解决方案1
0 2018-09-22 08:08:40
I found 2 issues when I tried it with your code. 我尝试使用您的代码时发现了2个问题。
Textarea: - your textarea already contains spaces after loading - so when you check if it's empty, it will find content and therefore it's "filled" 文本区域：-文本区域在加载后已经包含空格-因此，当您检查文本区域是否为空时，它将找到内容，因此已“填充”
(Institute_name == '')
So I would recommend to remove leading and trailing white spaces first, so only the "real content" will be checked (the js method trim will do this for you) 因此，我建议先删除开头和结尾的空格，以便仅检查“真实内容”（js方法trim将为您完成此操作）
( Institute_name.trim() == '')
Date: When you access the date field 日期：当您访问日期字段时
var DOB = document.getElementById('dob').value;
you already get the value (eg 2018-09-22). 您已经获得了价值（例如2018-09-22）。 So accessing the value twice 因此，两次访问该值
if(!DOB.value)
will always evaluate to undefined / false. 将始终评估为undefined / false。 So just check the variable again for eg empty string 因此，只需再次检查变量，例如空字符串
if(DOB == '')
Beside that you can always check if it's a valid date input (see Detecting an "invalid date" Date instance in JavaScript ) 除此之外，您始终可以检查输入的日期是否有效（请参阅在JavaScript中检测“无效日期” Date实例 ）
Btw. 顺便说一句。 I would recommend to look into Developer/Dev Tools of yor preferred browser - It really helps you to debug js code, inspect variables, etc. :-) 我建议您查看您喜欢的浏览器的Developer / Dev Tools-它确实可以帮助您调试js代码，检查变量等：-)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.