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="aa";
var selectionId=1;
var selecOff={custOfficeId,custOfficeName,fromDate,toDate,consignmentNo,selectionId,selectionName};
console.log(selecOff);
pushData.push(selecOff);
if(!fromDate){
$("#fromDateError").html('From Date can not be left blank');
/* alert("From Date is null"); */
}
if (!toDate){
$("#toDateError").html('To Date can not be left blank');
/* alert("To Date is null"); */
}
if(!consignmentNo){
$("#consignmentNoError").html('Consignment No can not be left blank');
}
if(!fromDate && !toDate && !consignmentNo){
alert("herte");
$("#fromDateError").html('From Date can not be left blank');
$("#toDateError").html('To Date can not be left blank');
$("#consignmentNoError").html('Consignment No can not be left blank');
}
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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href='/theme/css/nepali.datepicker.v2.2.min.css' />
<link href="/theme/fonts/preeti/stylesheet.css"
rel="stylesheet" type="text/css" charset="utf-8">
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</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>BIRATNAGAR BHANSAR</option>
<option value=2>BHAIRAWA BHANSAR</option>
</select>
<span id="selectError" style="color:red;font-weight:bold"></span>
</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/>
<span id="fromDateError" style="color:red;font-weight:bold"></span>
</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 />
<span id="toDateError" style="color:red;font-weight:bold"></span>
</div>
<div class="col-md-3">
<input type="number" class="form-control" id="consignmentNo"
required name="consignmentNo">
<span id="consignmentNoError" style="color:red;font-weight:bold"></span>
</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>我已经为输入字段添加了验证消息，但我不知道如何为选择标签添加验证。
“选择”是第一次加载页面时显示的默认值。但是当我按“+”按钮时，选择值就会在表格中向下显示，因为没有任何相关数据移动到表格。如何我可以验证标签吗？
最佳答案
这行不通？
if (!custOfficeId) {
$("#selectError").html('Custom office can not be left blank');
}
你不需要 if(!fromDate && !toDate && !consignmentNo){ ... }部分 - 只需添加 valid初始化为 true 的标志并设置为false如果任何验证失败。调用populateSelectionCustomTable仅当valid时是真的，即
let valid = true;
if (!custOfficeId) {
$("#selectError").html('Custom office can not be left blank');
valid = false;
}
if (!fromDate) {
$("#fromDateError").html('From Date can not be left blank');
valid = false;
}
if (!toDate) {
$("#toDateError").html('To Date can not be left blank');
valid = false;
}
if (!consignmentNo) {
$("#consignmentNoError").html('Consignment No can not be left blank');
valid = false;
}
if (valid) {
populateSelectionCustomTable();
}
关于javascript - 如何使用 javascript/jquery 在 <select> 标签中添加验证？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53901834/