JavaScript 表单验证未按预期工作，即使有错误也会提交表单

标签 javascript php jquery html forms

我最近开始学习 JavaScript 和 PHP。在我的代码中，我想以管理员身份将项目添加到系统中。我已经完成了一定程度的验证。此验证并不是那么严格，但它提交表单时不会显示空字段或错误填写的字段。由于我是初学者，我无法发现错误，但代码工作正常。有什么建议可以避免这些错误并正确进行验证吗？

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>

最佳答案

替换这个即可

    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>

关于JavaScript 表单验证未按预期工作，即使有错误也会提交表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46510360/

上一篇：javascript - 逻辑运算符(AND 运算符)

下一篇：javascript - Div 在页面加载时短暂出现 - 我该如何阻止它这样做？

相关文章：

当函数调用自身时，Javascript 变量会发生变化

javascript - 如何从其他 npm 依赖项导入模块依赖项？

javascript - 如何使用api修改bigcommerce前端(在应用程序中添加js代码)

javascript - 基于本地时间的月份重定向 Javascript

php - Codeigniter: header 已发送错误

jquery - 内容可编辑的问题

javascript - 为什么这个 childNodes 会给我那个奇怪的输出？

php - XDebug/Apache/PHP/Eclipse 跳过断点

javascript - div选择问题

javascript - 将字符串格式的 html 元素附加到元素，在元素周围添加双引号

©2024 IT工具网  联系我们