javascript - "required"验证在 JavaScript 中不起作用

标签 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 所需的验证在这里工作？

最佳答案

您可以使用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 - "required"验证在 JavaScript 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53799977/

上一篇：javascript - 反向图像搜索特定网站

下一篇：javascript - 如何使用node.js和express.js向mongo db atlas发出post请求

相关文章：

javascript - 错误类型错误 : Cannot read property '...' of undefined

javascript - Flot 问题中的时间图？

html - 当高度为 : 100% doesn't work 时将 div 设置为 100% 高度

jquery - 两个 div 并排 : how can i make the div that is on the left side go down when it breaks for responsive layout?

html - 如何使用 css 将其居中？

javascript - 选择 "other"字段时将选择选项发布到数据库

javascript - MVC Asp.Net Controller 将原始 JSON 返回到新窗口

javascript - 无法识别 jQuery 悬停事件

javascript - 在 Javascript/React 中将对象转换为数组

jquery - Clone的Class加法无效

©2024 IT工具网  联系我们