验证后在提交按钮上打开模式

Question

如果用户输入了一些值，我想在点击提交按钮时打开一个模态，否则不需要打开模态。

目前，当单击 sumbit 按钮时，模式正在打开而未验证 必需 字段

这是表格

<form action=" " method="POST">
    <label> Employee ID &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;</label>
    <input type="text" name="id" placeholder="Enter Employee ID" required><br><br><br>
    <input type="submit"  onclick="mdl1()" value="Update">
    <button type="submit"  onclick="mdl2()" style="margin-left:100px;"> Delete</button><br>
</form>

更新模式

<div id="Modal_update" class="modal">
    <div class="modal-content">
    <span class="close" onclick="close_mdl1()">&times;</span>
    <div class="container">
      <form action="home.php" method="POST">
        <label><b>Employee ID</b></label>
        <input type="text" placeholder="Enter User ID" name="id" value="<?php echo $_SESSION['ID'] ?>" required>
        <label><b>Name</b></label>
        <input type="text" placeholder="Enter Name" name="name" value="<?php echo $_SESSION['Name'] ?>" required>
        <label><b>Employee Type</b></label>
        <input type="text" placeholder="Temporary/Permanent" name="emp_type" value="<?php echo $_SESSION['Emp_type'] ?>" required>
        <button type="submit" class="modalbutton" name="update">Update</button><br>
      </form>
    </div>
  </div>
</div>

mdl1() 的代码

function mdl1() {
  document.getElementById('Modal_update').style.display = "block";
}

function close_mdl1() {
  document.getElementById('Modal_update').style.display = "none";
}

window.onclick = function(event) {
  if (event.target == document.getElementById('Modal_update')) {
    document.getElementById('Modal_update').style.display = "none";
  }
}

提前致谢！

Answer 1

试试这个：

function mdl1() {
  var id = document.getElementsByName("id")[0].value;
  if(id != ''){
    document.getElementById('Modal_update').style.display = "block";
  }else{
    alert('Employee ID can not be empty.');
  }
}

注意：请确保您的姓名不同。

Answer 2

为表单标签提供id 属性，例如-<form action=" " method="POST" id="form_id">，并且在调用模态时可以使用-

if($("#form-id").valid())
{
   //call your modal
   //if you are using latest version of js, you could this syntax
   $("#Modal_update").modal('show');   
}    

确保在代码中添加jquery.validate.js。