JavaScript表单验证无法正常工作，即使有错误也正在提交表单
[英]JavaScript form validation isn't working as expected, it's submitting the form even with errors
问题描述
I've recently started learning JavaScript and PHP. 
我最近开始学习JavaScript和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 © Sri Lanka Institute of Information Technology, 2017 - All rights Reserved. </pre> </footer> </div> </body> </html>
4 个解决方案
解决方案1
2 已采纳 2017-10-01 08:46:45
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 © Sri Lanka Institute of Information Technology, 2017 - All rights Reserved. </pre> </footer> </div> </body> </html>
解决方案2
2 2017-10-01 08:58:47
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 © Sri Lanka Institute of Information Technology, 2017 - All rights Reserved. </pre> </footer> </div> </body> </html>
解决方案3
1 2017-10-01 08:06:45
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: ，则在此行中声明变量call时引用变量cal ：
var call = document.add.call.value;
Edit : Also, you're using <select> wrongly. 编辑 ：另外，您错误地使用了<select> 。 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. AFAIK，您只能通过其name属性引用<form> 。 The same goes for <input> , and <select> elements. <input>和<select>元素也是如此。 Unless you're using document.getElementById(id) . 除非您使用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>
解决方案4
1 2017-10-01 12:05:24
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. Item是undefined ，所以它不等于“”（空字符串），这就是代码验证的原因。
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: 仅在document后添加.forms获得每个输入的值：
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 © Sri Lanka Institute of Information Technology, 2017 - All rights Reserved. </pre> </footer> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
JavaScript表单验证不检查错误 - JavaScript form validation isn't checking for errors
验证后为什么不提交表单 - Why isn't the form submitting after validation
javascript表单验证无法正常工作 - javascript form validation not working as expected
使用javascript进行表单验证未提交 - Form validation with javascript not submitting
外部 Javascript 表单验证不起作用，不知道为什么？ - External Javascript form validation isn't working, not sure why?
jQuery表单提交未提交表单 - jQuery form submitting isn't submitting the form
为什么我的 javascript 表单验证不起作用？ - Why isn't my javascript form validation working?
我的表单不适用于我的 Javascript 验证 - My Form isn't working with my Javascript validation
即使验证失败，表单仍在提交 - Form is submitting even if validation fails
表单验证（JavaScript），不确定为什么不起作用。 （没有错误，但没有出现消息框） - Form Validation (JavaScript), unsure why it's not working. (No errors, but messagebox doesn't appear)
相关标签