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

Question

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>

It would help if you specified the errors you see. Also: A title should be a good summary of your question, it shouldn't be **part** of the question. — KIKO Software, Oct 01 '17 at 08:01
@KIKOSoftware I don't see any errors as i said :( Even I can't spot out the error. Alert boxes aren't showing up when there are empty fields. It's submitting like there are no errors :/ — Hashini, Oct 01 '17 at 08:04
@hashini.W You trying to do validation with javascript on for submit ? — RïshïKêsh Kümar, Oct 01 '17 at 08:07
@RïshïKêshKümar yeah as far as I know it should work :( Is it wrong? would you please show me the error? — Hashini, Oct 01 '17 at 08:09
Your HTML script ordering is wrong. You should first include polyfills, then jquery and as last you should include your .js. Read more about it here: https://stackoverflow.com/questions/196702/where-to-place-javascript-in-an-html-file — caramba, Oct 01 '17 at 08:11
I've corrected the order @caramba. But it's still submitting the form with errors :/ — Hashini, Oct 01 '17 at 08:16
You should also update your question then, not everyone likes to read all comments. — caramba, Oct 01 '17 at 08:19
If you are only checking for emptyness why not just add `required` (HTML5) to all input fields. like `` — caramba, Oct 01 '17 at 08:22
@caramba I need to check some digit ranges also. Not only the emptiness — Hashini, Oct 01 '17 at 08:28

score 2 · Accepted Answer · answered Oct 01 '17 at 08:46

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>

score 2 · Answer 2 · answered Oct 01 '17 at 08:58

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>

pciang · Answer 3 · 2017-10-01T08:31:26.923

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>

Thanks for your suggestion @pciang but still the error occurs :( — Hashini, Oct 01 '17 at 08:13
Empty fields in my form isn't showing up through alert boxes. It's submitting the form with those empty fields :( @pciang — Hashini, Oct 01 '17 at 08:17
@hashini.W you need to fix your js code, because you're referring to field names in the form wrongly. — pciang, Oct 01 '17 at 08:34
Thx alot! I will fix the code according to your suggestion :) — Hashini, Oct 01 '17 at 08:52

score 1 · Answer 4 · answered Oct 01 '17 at 12:05

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>

Thanks a lot @MarioZ It was a pretty good explanation for a beginner to avoid errors like these. Thanks again :) — Hashini, Oct 01 '17 at 12:51

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

4 Answers4