“必需”验证不适用于javascript

时间：2018-12-16 06:33:32

标签： javascript jquery html 

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>

enter image description here

我在html中的每个输入字段和选择选项中都添加了“ required”属性。但是，如果我什至没有输入任何数据并单击加号按钮，它就会被推送到表中，而应该显示给我验证所需的错误。在“选择”中，我还添加了必填字段，但默认值是自动添加到表中。如何使此html5必需的验证在这里起作用？

1 个答案:

答案 0 :(得分：2)

您可以使用 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>

相关问题
最新问题