Open modal upon submit button after validation

Question

I want to open a Modal upon clicking submit button if the user input some value,otherwise there is no need to open the modal.

presently, when clicking sumbit button the modal is opening without validating the required feild

<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>

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";
  }
}

Thanks in advance.!

Answer 1

Provide id attribute to form tag like- <form action=" " method="POST" id="form_id"> , and while calling you modal you could use-

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

Make sure you add jquery.validate.js in your code.

Answer 2

Try This:

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.');
  }
}

Note: Make sure you don't have same name.