“必需”验证不适用于javascript
[英]“required” validation not working in javascript
问题描述
pushData = []; //+ button when clicked function myFunction() { var custOfficeId = document.getElementById('customOfficeId').value; var custOfficeName = $("#customOfficeId option:selected").text(); var fromDate = document.getElementById('fromDate').value; var toDate = document.getElementById('toDate').value; var consignmentNo = document.getElementById('consignmentNo').value; var selectionName = "A"; var selectionId = 1; var selecOff = { custOfficeId, custOfficeName, fromDate, toDate, consignmentNo, selectionId, selectionName }; console.log(selecOff); pushData.push(selecOff); console.log(pushData); populateSelectionCustomTable(); } function populateSelectionCustomTable() { $("#tempTable tbody").html(""); for (var i = 0; i < pushData.length; i++) { var r = pushData[i]; $("#tempTable tbody") .append( "<tr>" + "<td>" + r.custOfficeName + "</td><td>" + r.fromDate + "</td><td>" + r.toDate + "</td>" + "<td>" + r.consignmentNo + "</td>" + "<td>" + r.selectionName + "</td>" + "<td>" + "<input id='filter" + i + "' value='Delete' type='button' alt='Delete" + i + "' class='deleteIcon'/>" + "</td></tr></tbody>"); } }
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="form-group row"> <div class="col-md-4"> <label>Custom Office</label> </div> <div class="col-md-2"> <label>From Date</label> </div> <div class="col-md-2"> <label>To Date</label> </div> <div class="col-md-4">Consignment No</div> <div class="col-md-4"> <select class="form-control" id="customOfficeId" required name="customOfficeId" > <option value="" disabled selected>Choose</option> <option value=1>Office 1</option> <option value=2>Office 2</option> </select> </div> <div class="col-md-2"> <input type="text" class="form-control nepali-calendar ndp-nepali-calendar" id="fromDate" onfocus="showNdpCalendarBox('fromDate')" name="fromDate" required/> </div> <div class="col-md-2"> <input type="text" class="form-control nepali-calendar ndp-nepali-calendar" id="toDate" name="toDate" onfocus="showNdpCalendarBox('toDate')" required /> </div> <div class="col-md-3"> <input type="number" class="form-control" id="consignmentNo" required name="consignmentNo"> </div> <div class="col-md-1"> <button onclick="myFunction()">+</button> </div> </div> <table class="table table-bodered" id="tempTable"> <thead> <th>Custom Office</th> <th>From Date</th> <th>To Date</th> <th>Consignment No</th> <th>Selection Name</th> <th>Action</th> </thead> <tbody> </tbody> </table> </body> </html>
我在每个输入字段和html的上面的选择选项中都添加了“必需”属性。但是，如果我什至没有输入任何数据并单击加号按钮，它就会被推送到表中，而应该向我显示所需的验证信息错误。 在“选择”中，我还添加了必填字段，但默认值是自动添加到表中。如何使此html5必需的验证在这里起作用？
1 个解决方案
解决方案1
2 已采纳 2018-12-16 06:46:08
您可以使用checkValidity（）来检查表单中的字段是否有效。
https://www.w3schools.com/js/js_validation_api.asp
pushData = []; //+ button when clicked function myFunction() { var custOfficeId = document.getElementById('customOfficeId').value; var custOfficeName = $("#customOfficeId option:selected").text(); var fromDate = document.getElementById('fromDate').value; var toDate = document.getElementById('toDate').value; var consignmentNo = document.getElementById('consignmentNo').value; var selectionName = "A"; var selectionId = 1; var selecOff = { custOfficeId, custOfficeName, fromDate, toDate, consignmentNo, selectionId, selectionName }; console.log(selecOff); if (document.getElementById("new-row").checkValidity()) { pushData.push(selecOff); console.log(pushData); populateSelectionCustomTable(); } else { alert('New row data is invalid or incomplete'); } } function populateSelectionCustomTable() { $("#tempTable tbody").html(""); for (var i = 0; i < pushData.length; i++) { var r = pushData[i]; $("#tempTable tbody") .append( "<tr>" + "<td>" + r.custOfficeName + "</td><td>" + r.fromDate + "</td><td>" + r.toDate + "</td>" + "<td>" + r.consignmentNo + "</td>" + "<td>" + r.selectionName + "</td>" + "<td>" + "<input id='filter" + i + "' value='Delete' type='button' alt='Delete" + i + "' class='deleteIcon'/>" + "</td></tr></tbody>"); } }
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <form id="new-row"> <div class="form-group row"> <div class="col-md-4"> <label>Custom Office</label> </div> <div class="col-md-2"> <label>From Date</label> </div> <div class="col-md-2"> <label>To Date</label> </div> <div class="col-md-4">Consignment No</div> <div class="col-md-4"> <select class="form-control" id="customOfficeId" required name="customOfficeId"> <option value="" disabled selected>Choose</option> <option value=1>Office 1</option> <option value=2>Office 2</option> </select> </div> <div class="col-md-2"> <input type="text" class="form-control nepali-calendar ndp-nepali-calendar" id="fromDate" onfocus="showNdpCalendarBox('fromDate')" name="fromDate" required/> </div> <div class="col-md-2"> <input type="text" class="form-control nepali-calendar ndp-nepali-calendar" id="toDate" name="toDate" onfocus="showNdpCalendarBox('toDate')" required /> </div> <div class="col-md-3"> <input type="number" class="form-control" id="consignmentNo" required name="consignmentNo"> </div> </form> <div class="col-md-1"> <button onclick="myFunction()">+</button> </div> </div> <table class="table table-bodered" id="tempTable"> <thead> <th>Custom Office</th> <th>From Date</th> <th>To Date</th> <th>Consignment No</th> <th>Selection Name</th> <th>Action</th> </thead> <tbody> </tbody> </table> </body> </html>
在JavaScript中提交验证之前，HTML5“required”属性不起作用
[英]HTML5 “required” attribute not working before submit validation in JavaScript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.