我如何驗證 <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