hashini.W hashini.W - 3 years ago 155
HTML Question

JavaScript form validation isn't working as expected, it's submitting the form even with errors

I've recently started learning JavaScript and PHP. Here in my code, I want to add items to the system as an administrator. I've done the validation up to some point. This validation is not that much strict, but it's submitting the form without showing up the empty fields, or incorrectly filled fields. As I'm a beginner I can't spot out the error, but the code works fine. Any suggestions to avoid these errors and to do the validation correctly?



function validateForm() {
var item = document.add.item.value;
var type = document.add.type.value;
var category = document.add.category.value;
var title = document.add.title.value;
var publisher = document.add.publisher.value;
var year = document.add.year.value;
var place = document.add.place.value;
var Abstract = document.add.Abstract.value;
var medium = document.add.medium.value;
var edition = document.add.edition.value;
var number = document.add.number.value;
var shelf = document.add.shelf.value;
var call = document.add.call.value;
var barcode = document.add.barcode.value;
var pages = document.add.pages.value;
var Barcode = barcode.length;

if (item == "" || type == "" || category == "" || title == "" || publisher == "" || year == "" || place == "" || Abstract == "" || medium == "" || edition == "" || number == "" || shelf == "" || call == "" || barcode == "" || pages == "") {
alert("Please fill all details");
return false;
}

if ((Barcode >= 17) || (Barcode < 12)) {
alert("Password should have 12 - 16 characters");
return false;
}

if (isNaN(barcode)) {
alert("Incorrect Bar Code Number");
return false;
}
}

body {
background-color: #9cb4c0;
background-size: 100% 100%;
}

.div-1 {
float: right;
padding: 20px 10px;
}

h2 {
text-align: right;
}

a:link {
color: rgb(7, 19, 86);
background-color: transparent;
text-decoration: none;
font-size: 20px;
}

a:visited {
color: orange;
background-color: transparent;
text-decoration: none;
}

a:active {
color: rgb(216, 120, 10);
background-color: transparent;
text-decoration: underline;
}

.list-1 {
list-style-type: none;
overflow: hidden;
margin: 0;
padding: 0;
text-align : right;
}

.list-1:active {
box-shadow: 0 5px #666;
transform: translateY(4px);
}

.list-1 li a {
float: right;
display: block;
padding: 8px;
text-align: center;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
color: #666;
}

.list-1 li a:hover {
background-color: #ff6c00;
}

.list-2 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #228bbb;
}

.list-2 a {
border-right: 1px solid #bbb;
float: left;
display: block;
padding: 14px 16px;
color: rgb(7, 19, 86);
}

.list-2 a:hover:not(.active) {
background-color: #ff6c00;
}

.list-2 .active {
background-color: #ff6c00;
}

.button-1, .button-2 {
background-color: #2980B9;
color: white;
font-family: arial;
border: none;
padding: 10px 10px;
text-align: center;
display: inline-block;
margin: 4px 8px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
font-style: italic;
outline: none;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button-1:active, .button-2:active {
background-color: #2980B9;
box-shadow: 0 5px #666;
transform: translateY(4px);
}

footer {
clear: both;
position: relative;
z-index: 10;
height: 1em;
text-align: center;
background-color: #228bbb;
color: black;
}

<!DOCTYPE HTML>
<html>
<head>
<title> SLIIT LIBRARY </title>
<link rel = "stylesheet" type = "text/css" href = "Style.css"/>
<script src = "//cdn.jsdelivr.net/webshim/1.14.5/polyfiller.js"></script>

<script>

webshims.setOptions
('forms-ext',
{
types: 'date'
}
);

webshims.polyfill
(
'forms forms-ext'
);

$.webshims.formcfg =
{
en:
{
dFormat: '-',
dateSigns: '-',
patterns:
{
d: "yy-mm-dd"
}
}
};

</script>

<script type = "text/javascript" src = "http://code.jquery.com/jquery-2.1.4.min.js"></script>

<script type = "text/JavaScript" src = "FormValidation.js"></script>

</head>
<body>

<img src = "SLIIT.png" width = "300" height = "200" />
<div class = "div-1">
<ul class = "list-1">
<li>
<a href = "Register to the system.html" target = "_blank"> Register </a>
</li>
<li>
<a href = "Login to the system.html" target = "_blank"> Staff </a>
</li>
</ul>

<h2>
<a href = "/SLIIT LIBRARY/" target = "_blank"> SLIIT LIBRARY</a>
</h2>
</div>

<ul class = "list-2">
<li> <a href = "/Home/" target = "_blank"> Home </a> </li>
<li> <a href = "/Add Material/" target = "_blank"> Add Material </a> </li>
<li> <a href = "/Search/" target = "_blank"> Search </a> </li>
<li> <a href = "/Borrowed Books/" target = "_blank"> Borrowed Books </a> </li>
<li> <a href = "/Member Details/" target = "_blank"> Member Details </a> </li>
</ul>

<center>
<h3>Adding New Material</h3>
<form id = "add" name = "SLIIT Library" method = "POST" action = "" onsubmit = "return validateForm()">
<table>
<tr>
<td>Item Number</td>
<td><input type = "text" name = "Item Number" id = "item" placeholder = "B001"></td>
</tr>

<tr>
<td>Item Type</td>
<td>
<select name = "Item Type" id = "type">
<option>---Select One---</option>
<option>Book</option>
<option>Standard</option>
<option>Journal</option>
<option>CD</option>
<option>Article</option>
</select>
</td>
</tr>

<tr>
<td>Category </td>
<td>
<select name = "Category" id = "category">
<option>---Select One---</option>
<option>Information Technology</option>
<option>Business Management</option>
<option>Enginerring</option>
<option>General</option>
</select>
</td>
</tr>

<tr>
<td>Title </td>
<td><input type = "text" name = "Title" id = "title" placeholder = "JavaScript and PHP"></td>
</tr>

<tr>
<td>Publisher </td>
<td><input type = "text" name = "Publisher" id = "publisher" placeholder = "JavaScript and PHP"></td>
</tr>

<tr>
<td>Year of Publication </td>
<td><input type = "date" name = "Year of Publication" id = "year"></td>
</tr>

<tr>
<td>Place of Publisher</td>
<td><input type = "text" name = "Place of Publisher" id = "place" placeholder = "England"></td>
</tr>

<tr>
<td>Abstract </td>
<td><textarea name = "Abstract" id = "Abstract" rows = "3" cols = "18"></textarea>
</tr>

<tr>
<td>Medium </td>
<td>
<select name = "Medium" id = "medium">
<option>---Select One---</option>
<option>English</option>
<option>Sinhala</option>
<option>Tamil</option>
</select>
</td>
</tr>

<tr>
<td>Edition </td>
<td><select name = "Edition" id = "edition"/>
<option>---Select One---</option>
</td>
</tr>

<tr>
<td>ISBN/ISSN No </td>
<td><input type = "text" name = "ISBN/ISSN No" id = "number"></td>
</tr>

<tr>
<td>Shelf Number </td>
<td><input type = "number" name = "Shelf Number" id = "shelf" min = "1"></td>
</tr>

<tr>
<td>Call Number </td>
<td><input type = "number" name = "Call Number" id = "call" min = "1"></td>
</tr>

<tr>
<td>Bar Code No </td>
<td><input type = "number" name = "Bar Code No" id = "barcode" min = "0"></td>
</tr>

<tr>
<td>No of Pages </td>
<td><input type = "number" name = "No of Pages" id = "pages" min = "1"></td>
</tr>

<tr>
<td></td>
<td>
<input class = "button-1" type = "submit" name = "Insert" id = "submit" value = "Insert">
<input class = "button-2" type = "reset" name = "reset" value = "Reset">
</td>
</tr>
</table>
</form>
</center>
<div>
<footer>
<pre> Copyright &#169; Sri Lanka Institute of Information Technology, 2017 - All rights Reserved. </pre>
</footer>
</div>
</body>
</html>




Vky Vky
Answer Source

Just replace this

    var item=document.getElementById("item").value;
    var type=document.getElementById("type").value;
    var category=document.getElementById("category").value;
    var title=document.getElementById("title").value;
    var publisher=document.getElementById("publisher").value;
    var year=document.getElementById("year").value;
    var place=document.getElementById("place").value;
    var Abstract=document.getElementById("Abstract").value;
    var medium=document.getElementById("medium").value;
    var edition=document.getElementById("edition").value;
    var number=document.getElementById("number").value;
    var shelf=document.getElementById("shelf").value;
    var call=document.getElementById("call").value;
    var barcode=document.getElementById("barcode").value;
    var pages=document.getElementById("pages").value;
    var Barcode = barcode.length;

function validateForm() {
  	var item=document.getElementById("item").value;
	var type=document.getElementById("type").value;
	var category=document.getElementById("category").value;
	var title=document.getElementById("title").value;
	var publisher=document.getElementById("publisher").value;
	var year=document.getElementById("year").value;
	var place=document.getElementById("place").value;
	var Abstract=document.getElementById("Abstract").value;
	var medium=document.getElementById("medium").value;
	var edition=document.getElementById("edition").value;
	var number=document.getElementById("number").value;
	var shelf=document.getElementById("shelf").value;
	var call=document.getElementById("call").value;
	var barcode=document.getElementById("barcode").value;
	var pages=document.getElementById("pages").value;
	var Barcode = barcode.length;
	
  if (item == "" || type == "" || category == "" || title == "" || publisher == "" || year == "" || place == "" || Abstract == "" || medium == "" || edition == "" || number == "" || shelf == "" || call == "" || barcode == "" || pages == "") {
    alert("Please fill all details");
    return false;
  }
		
  if ((Barcode >= 17) || (Barcode < 12)) {
	alert("Password should have 12 - 16 characters");
    return false;
  }
		 	  		
  if (isNaN(barcode)) {
    alert("Incorrect Bar Code Number");
	return false;
  }
}
body {
  background-color: #9cb4c0;
  background-size: 100% 100%;
}
	
.div-1 {
  float: right;
  padding: 20px 10px;
}
	
h2 {	
  text-align: right;
}
	
a:link {
  color: rgb(7, 19, 86);
  background-color: transparent;
  text-decoration: none;
  font-size: 20px;
}

a:visited {
  color: orange;
  background-color: transparent;
  text-decoration: none;
}
	
a:active {
  color: rgb(216, 120, 10);
  background-color: transparent;
  text-decoration: underline;
}

.list-1 {
  list-style-type: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
  text-align : right;
}

.list-1:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
	
.list-1 li  a {
  float: right;
  display: block;
  padding: 8px;
  text-align: center;
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
  color: #666;
}
	
.list-1 li a:hover {
  background-color: #ff6c00;
}
	
.list-2 {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #228bbb;
}
	
.list-2 a {
  border-right: 1px solid #bbb;
  float: left;
  display: block;
  padding: 14px 16px;		
  color: rgb(7, 19, 86);
}
	
.list-2 a:hover:not(.active) {
  background-color: #ff6c00;
}
	
.list-2 .active {
  background-color: #ff6c00;
}

.button-1, .button-2 {
  background-color: #2980B9;
  color: white;
  font-family: arial;
  border: none;
  padding: 10px 10px;
  text-align: center;
  display: inline-block;
  margin: 4px 8px;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  cursor: pointer;
  font-style: italic;
  outline: none;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button-1:active, .button-2:active {
  background-color: #2980B9;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
	
footer {
  clear: both;
  position: relative;
  z-index: 10;
  height: 1em;
  text-align: center;
  background-color: #228bbb;
  color: black;
}
<!DOCTYPE HTML>
<html>
  <head>
    <title> SLIIT LIBRARY </title>
    <link rel = "stylesheet" type = "text/css" href = "Style.css"/>
    <script src = "//cdn.jsdelivr.net/webshim/1.14.5/polyfiller.js"></script>

    

    <script type = "text/javascript" src = "http://code.jquery.com/jquery-2.1.4.min.js"></script>
 
    <script type = "text/JavaScript" src = "FormValidation.js"></script>

  </head>
  <body>

    <img src = "SLIIT.png" width = "300" height = "200" />
    <div class = "div-1">
      <ul class = "list-1">
	    <li>
          <a href = "Register to the system.html" target = "_blank"> Register </a>
        </li>
	    <li>
          <a href = "Login to the system.html" target = "_blank"> Staff </a> 
        </li>
      </ul>

      <h2> 
        <a href = "/SLIIT LIBRARY/" target = "_blank"> SLIIT LIBRARY</a>
      </h2>
    </div>

    <ul class = "list-2">
      <li> <a href = "/Home/" target = "_blank"> Home </a> </li>
      <li> <a href = "/Add Material/" target = "_blank"> Add Material </a> </li>
      <li> <a href = "/Search/" target = "_blank"> Search </a> </li> 
      <li> <a href = "/Borrowed Books/" target = "_blank"> Borrowed Books </a> </li>
      <li> <a href = "/Member Details/" target = "_blank"> Member Details </a> </li>
  </ul>

  <center>
    <h3>Adding New Material</h3>
    <form id = "add" name = "SLIIT Library" method = "POST" action = "" onsubmit = "return validateForm()">
      <table>
	    <tr>
		  <td>Item Number</td>
		  <td><input type = "text" name = "Item Number" id = "item" placeholder = "B001"></td>
	    </tr>
		
	    <tr>
		  <td>Item Type</td>
		  <td>
            <select name = "Item Type" id = "type">
		      <option>---Select One---</option>
			  <option>Book</option>
			  <option>Standard</option>
			  <option>Journal</option>
			  <option>CD</option>
			  <option>Article</option>
            </select>
		  </td>
	    </tr>
	
    	<tr>
		  <td>Category	</td>
		  <td>
            <select name = "Category" id = "category">
			  <option>---Select One---</option>
			  <option>Information Technology</option>
			  <option>Business Management</option>
			  <option>Enginerring</option>
			  <option>General</option>
            </select>
		  </td>
	    </tr>
	
	    <tr>
		  <td>Title	</td>
		  <td><input type = "text" name = "Title" id = "title" placeholder = "JavaScript and PHP"></td>
	    </tr>
		
	    <tr>
		  <td>Publisher	</td>
		  <td><input type = "text" name = "Publisher" id = "publisher" placeholder = "JavaScript and PHP"></td>
	    </tr>
	
	    <tr>
		  <td>Year of Publication	</td>
		  <td><input type = "date" name = "Year of Publication" id = "year"></td>
	    </tr>
	
	    <tr>
		  <td>Place of Publisher</td>
	      <td><input type = "text" name = "Place of Publisher" id = "place" placeholder = "England"></td>
	    </tr>
	
	    <tr>
		  <td>Abstract	</td>
		  <td><textarea name = "Abstract" id = "Abstract" rows = "3" cols = "18"></textarea>
	    </tr>
	
	    <tr>
		  <td>Medium	</td>
		  <td>
            <select name = "Medium" id = "medium">
			  <option>---Select One---</option>
			  <option>English</option>
			  <option>Sinhala</option>
			  <option>Tamil</option>
            </select>
		  </td>
	    </tr>
	
	    <tr>
		  <td>Edition	</td>
		  <td><select name = "Edition" id = "edition"/>
			<option>---Select One---</option>
		  </td>
	    </tr>
	
	    <tr>
		  <td>ISBN/ISSN No	</td>
		  <td><input type = "text" name = "ISBN/ISSN No" id = "number"></td>
	    </tr>
	
	    <tr>
		  <td>Shelf Number	</td>
		  <td><input type = "number" name = "Shelf Number" id = "shelf" min = "1"></td>
	    </tr>
	
	    <tr>
		  <td>Call Number	</td>
		  <td><input type = "number" name = "Call Number" id = "call" min = "1"></td>
	    </tr>
	
	    <tr>
		  <td>Bar Code No	</td>
		  <td><input type = "number" name = "Bar Code No" id = "barcode" min = "0"></td>
	    </tr>
	
	    <tr>
		  <td>No of Pages </td>
		  <td><input type = "number" name = "No of Pages" id = "pages" min = "1"></td>
	    </tr>

	    <tr>
		  <td></td>
		  <td>
            <input class = "button-1" type = "submit" name = "Insert" id = "submit" value = "Insert">
			<input class = "button-2" type = "reset" name = "reset" value = "Reset">
          </td>
	    </tr>   	
      </table>
    </form>
  </center>
  <div>
    <footer>
      <pre> Copyright &#169; Sri Lanka Institute of Information Technology, 2017 - All rights Reserved. </pre>
    </footer>
  </div>
</body>
</html>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download