Reputation: 89

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>

Upvotes: 0

Answers (4)

MarioZ

Reputation: 997

though you have a good answer I wanted to explain what is happening in your code.

You're defining this:

var item = document.add.item.value;

And you're trying to validate using a comparison like:

if(item == "");

Item is undefined, so it's not equal to "" (empty string), that's the reason why your code validates.

I guess you were trying to use this syntax to define your variables:

var item = document.forms.add.item.value;

You forgot to include the object forms, and that's the reason why your variables were undefined.

Just adding .forms after document will get you the value of each input:

function validateForm() {
  var item = document.forms.add.item.value;
  var type = document.forms.add.type.value;
  var category = document.forms.add.category.value;
  var title = document.forms.add.title.value;
  var publisher = document.forms.add.publisher.value;
  var year = document.forms.add.year.value;
  var place = document.forms.add.place.value;
  var Abstract = document.forms.add.Abstract.value;
  var medium = document.forms.add.medium.value;
  var edition = document.forms.add.edition.value;
  var number = document.forms.add.number.value;
  var shelf = document.forms.add.shelf.value;
  var call = document.forms.add.call.value;
  var barcode = document.forms.add.barcode.value;
  var pages = document.forms.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
    <title> SLIIT LIBRARY </title>
    <link rel = "stylesheet" type = "text/css" href = "Style.css"/>
    
  </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>

Upvotes: 1

RïshïKêsh Kümar

Reputation: 5092

For Reference: https://www.w3schools.com/js/js_validation.asp

function validateForm() {

 var item = document.forms["myForm"]["item"].value;
 var type = document.forms["myForm"]["type"].value;
 var category = document.forms["myForm"]["category"].value;
 var title = document.forms["myForm"]["title"].value;
 var publisher = document.forms["myForm"]["publisher"].value;
 var year = document.forms["myForm"]["year"].value;
 var place = document.forms["myForm"]["place"].value;
 var Abstract = document.forms["myForm"]["Abstract"].value;
 var medium = document.forms["myForm"]["medium"].value;
 var edition = document.forms["myForm"]["edition"].value;
 var ISBN_number = document.forms["myForm"]["ISBN_number"].value;
 var shelf = document.forms["myForm"]["shelf"].value;
 var call = document.forms["myForm"]["call"].value;
 var barcode = document.forms["myForm"]["barcode"].value;
 var pages = document.forms["myForm"]["pages"].value;
 var Barcode = barcode.length;

    if (item == "" || type == "" || category == "" || title == "" || publisher == "" || year == "" || place == "" || Abstract == "" || medium == "" || edition == "" || number == "" || shelf == "" || call == "" || barcode == "" || pages == "") {

        alert("All Field must be filled out");
        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;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
  <head>
    <title> SLIIT LIBRARY </title>
    <link rel = "stylesheet" type = "text/css" href = "Style.css"/>
    <script type = "text/JavaScript" src = "FormValidation.js"></script>
    <script type = "text/javascript" src = "http://code.jquery.com/jquery-2.1.4.min.js"></script> 
    <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>

    <style type="text/css">
    	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;
}


</style>


  </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="myForm" method="POST" action="" onsubmit="return validateForm()" novalidate>
      <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 = "ISBN_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>

Upvotes: 2

Klaus Mikaelson

Reputation: 572

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>

Upvotes: 2

pciang

Reputation: 301

You have a syntax error in your code. In line:

if (item == "" || type == "" || category == "" || title == "" || publisher == "" || year == "" || place == "" || Abstract == "" || medium == "" || edition == "" || number == "" || shelf == "" || cal == "" || barcode == "" || pages == "")

, you're referring to variable cal, while you declared a variable called call in this line:

var call = document.add.call.value;

Edit: Also, you're using <select> wrongly. In your code:

<select name = "Item Type" id = "type"/>

Correct usage:

<form name="myForm">
  <select name="selectField">
    <option value="choice1">Choice 1</option>
    <option value="choice2" selected="selected">Choice 2</option>
    <option value="choice3">Choice 3</option>
  </select>
</form>

<script type="text/javascript">
  var selectField = document["myForm"].selectField; // document.myForm is correct as well
  console.log(selectField.value);
</script>

AFAIK, you can only refer to <form> by their name attributes. The same goes for <input>, and <select> elements. Unless you're using document.getElementById(id). More example:

<form name="my form" id="myForm">
  <input type="text" name="foo bar" id="foo_bar" />
</form>

<script type="text/javascript">
  var myForm = document["my form"];
  var myFormById = document.getElementById("myForm");
  console.log(myForm === myFormById);
  var fooBar = myForm["foo bar"];
  var fooBarById = document.getElementById("foo_bar");
  console.log(fooBar === fooBarById);
</script>

Upvotes: 1

JavaScript form validation isn&#39;t working as expected, it&#39;s submitting the form even with errors

Answers (4)

Related Questions

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