How can i validate <input type = “date”> and <textarea></textarea> tag using javascript

Question

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. 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 &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>

Here I am using span tag to print the error of not filling that field, and made this tag's class = "danger".

Answer 1

I found 2 issues when I tried it with your code.

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)

( 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). So accessing the value twice

if(!DOB.value)

will always evaluate to 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 )

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. :-)

How can i validate <input type = “date”> and <textarea></textarea> tag using javascript

Question

1 answers

solution1
0 2018-09-22 08:08:40

How can i validate <input type = “date”> and <textarea></textarea> tag using javascript

Question

1 answers

solution1 0 2018-09-22 08:08:40

solution1
0 2018-09-22 08:08:40