如何在中添加验证 <select>使用javascript / jquery进行标记？

Question

  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>

I have added the valdation message for the input fields but I am stuck how to add validation for select tag. 我已经为输入字段添加了验证消息，但是我被困在如何为select标签添加验证中。

"Choose" is the default value shown on when page is loaded at first.But when i press "+" button just that choose value is going on table downward,since it is not any relevant data to move to table.How can i validate for the tag? “选择”是第一次加载页面时显示的默认值。但是当我按下“ +”按钮时，选择值正向下显示在表上，因为没有任何相关数据移动到表中。我如何验证标签？

Answer 1

Doesn't this work? 这不行吗？

if (!custOfficeId) {
    $("#selectError").html('Custom office can not be left blank');
}

you don't need the if(!fromDate && !toDate && !consignmentNo){ ... } section - just add a valid flag that's initialized to true and set to false if any of the validations fail. 您不需要if(!fromDate && !toDate && !consignmentNo){ ... }部分-只需添加一个初始化为true的valid标志，并在任何验证失败的情况下将其设置为false 。 Invoke populateSelectionCustomTable only when valid is true, ie 仅当valid值为true时才调用populateSelectionCustomTable ，即

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();
}

如何在中添加验证 <select>使用javascript / jquery进行标记？

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-12-23 07:04:22

如何在中添加验证 <select>使用javascript / jquery进行标记？

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-12-23 07:04:22

解决方案1
1 已采纳 2018-12-23 07:04:22